@charset "utf-8";
/* CSS Document */

/*
==============================================================================*/


section .orangeContainer {border: solid max(.2rem, 2px) var(--color-DYFC-orange);}




/* Section A */
#sectionA > .wrap > .co_column2 > .container > .item.item1 > .text {}




/* Section B */
#sectionB {}
#sectionB > .wrap > .orangeContainer > *:first-child {margin-top: 0;}
#sectionB > .wrap > .orangeContainer > .d1 {}
#sectionB > .wrap > .orangeContainer > .d1 > .item {}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .title {background-color: var(--color-DYFC-orange); color: white; font-weight: bold;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body {font-weight: bold;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body > span {font-weight: normal;}




/* Section C */
#sectionC {}
#sectionC > .wrap > .orangeContainer {}
#sectionC > .wrap > .orangeContainer > .co_column2 {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item1 {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item1 > .title {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .scheduleImage {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .scheduleImage > img {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .note {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .linkBtn {}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .linkBtn > a.co_linkDeco {}




/* How To */
#howTo {}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .number {
	font-weight: 600;
	line-height: 1.1;
}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .title {font-weight: bold;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .text {}




/* Rental List */
#rentalList {}
#rentalList > .wrap > .listTableArea {}
#rentalList > .wrap > .listTableArea > .table {}
#rentalList > .wrap > .listTableArea > .table > .tableHead {font-weight: bold;}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow {}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb > img {}




/* Modal */
.modaal-wrapper .modaal-container {}
.modaal-wrapper .modaal-content-container {/* padding: 0; */}
.modaal-wrapper .modaal-content-container > .modalWrap {}
.modaal-wrapper .modaal-content-container > .modalWrap > .title {font-weight: bold; font-size: 2.2rem; color: var(--color-DYFC-orange);}
.modaal-wrapper .modaal-content-container > .modalWrap > .image {margin-top: 4rem; margin-bottom: 2rem;}
.modaal-wrapper .modaal-content-container > .modalWrap > .note {display: flex; flex-direction: column; gap: 1rem;}
.modaal-wrapper .modaal-content-container > .modalWrap > .note > .item {display: flex;}
.modaal-wrapper .modaal-content-container > .modalWrap > .note > .item > .header {font-weight: bold; white-space: nowrap;}
.modaal-wrapper .modaal-content-container > .modalWrap > .note > .item > .data {}

.modaal-wrapper .modaal-close {
	position: absolute;
	top: -5.6rem;
	right: -5.6rem;
}




/*============================================================================*/




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width: 767px) {/* // Mobile // */
/*============================================================================*/


section .orangeContainer {padding: 3rem 2rem;}




/* Section A */
#sectionA > .wrap > .co_column2 > .container > .item.item1 > .text {font-size: 1.4rem;}
#sectionA > .wrap > .co_column2 > .container > .item.item1 > .co_list {font-size: 1.2rem; margin-top: 1rem;}
#sectionA > .wrap > .co_column2 > .container > .item.item2 {margin-top: 3rem;}




/* Section B */
#sectionB {}
#sectionB > .wrap > .orangeContainer {text-align: center;}
#sectionB > .wrap > .orangeContainer > .co_title {margin-bottom: 3rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .title {margin-top:2rem; padding: 0.5rem 2rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body {margin-top: 1rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body > span {display: block; font-size: 1.2rem;}




/* Section C */
#sectionC {}
#sectionC > .wrap > .orangeContainer > .co_column2 {margin-top: 0;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item1 > .title {font-size: 2.2rem; text-align: left;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 {margin-top: 3rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .note {font-size: 1.3rem; margin-top: 3rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .linkBtn {margin-top: 3rem;}




/* How To */
#howTo {}
#howTo > .wrap > .co_column2 {margin-top: 10rem;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container + .container {margin-top: 4rem;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .number {
	margin-top: 2rem;
	font-size: 2rem;
}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .title {
	margin-top: .2rem;
	font-size: 2.6rem;
}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .text {
	margin-top: 2rem;
	font-size: 1.6rem;
}




/* Rental List */
#rentalList {}
#rentalList > .wrap > .co_title {margin-top: 10rem;}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow {display: none;}
#rentalList > .wrap > .listTableArea > .table > .tableData {
	padding-top: 1rem;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 3rem;
	padding-bottom: 4rem;
	border-bottom: solid max(.1rem, 1px) var(--color-table-border-gray);
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow a {text-decoration: underline;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(1) {
	font-size: 2rem;
	font-weight: bold;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(2) {font-size: 1.6rem;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(3) {font-size: 1.6rem;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div::before {
	display: block;
	font-weight: bold;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(1)::before {display: none;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(2)::before {content: var(--word-tableHead-tackle);}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(3)::before {content: var(--word-tableHead-fish);}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(4)::before {content: var(--word-tableHead-guide);}


#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb {display: flex; justify-content: center;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb > img {width: 11.4rem;}




/* Modal */
.modaal-wrapper .modaal-container {}
.modaal-wrapper .modaal-content-container {padding: 3rem 2rem;}
.modaal-wrapper .modaal-content-container > .modalWrap > .title {font-size: 1.6rem;}
.modaal-wrapper .modaal-content-container > .modalWrap > .image {margin-top: 2rem; margin-bottom: 1rem;}
.modaal-wrapper .modaal-content-container > .modalWrap > .note > .item {font-size: 1.2rem; flex-direction: column;}

.modaal-wrapper .modaal-close {position: fixed; top: 0.5rem; right: 0.5rem;}




/*============================================================================*/
}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width: 768px) {/* // PC // */
/*============================================================================*/


section .orangeContainer {padding: 4rem;}




/* Section A */
#sectionA > .wrap {padding-bottom: 0;}
#sectionA > .wrap > .co_column2 > .container {gap: 11rem;}
#sectionA > .wrap > .co_column2 > .container > .item.item1 {width: 87.3rem;}
#sectionA > .wrap > .co_column2 > .container > .item.item1 > .text {font-size: 2.2rem;}
#sectionA > .wrap > .co_column2 > .container > .item.item2 {flex: 1;}




/* Section B */
#sectionB {}
#sectionB > .wrap > .orangeContainer {text-align: center;}
#sectionB > .wrap > .orangeContainer > .d1 {
	display: flex;
	justify-content: space-between;
	gap: 4rem;
	text-align: center;
}
#sectionB > .wrap > .orangeContainer > .co_title {margin-bottom: 4rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item {flex: 1;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .title {font-size: 2.2rem; padding: 1.4rem 2rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body {margin-top: 2.5rem; font-size: 3rem;}
#sectionB > .wrap > .orangeContainer > .d1 > .item > .body > span {font-size: 1.6rem;}




/* Section C */
#sectionC {}
#sectionC > .wrap > .orangeContainer > .co_column2 {margin-top: 0;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container {gap: 3rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item1 {width: 34rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item1 > .title {font-size: 2.4rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > *:nth-child(n+2) {margin-top: 3rem;}
#sectionC > .wrap > .orangeContainer > .co_column2 > .container > .item2 > .linkBtn > a.co_linkDeco {width: fit-content;}




/* How To */
#howTo {}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container {
	display: flex;
	gap: 4rem;
}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container + .container {margin-top: 4rem;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item1 {width: 36rem;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 {flex: 1;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .number {font-size: 2.2rem;}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .title {
	font-size: 3.2rem;
	margin-top: .2rem;
}
#howTo > .wrap > .co_column2 > .container > .item.item2 > .container > .item.item2 > .text {
	font-size: 1.8rem;
	margin-top: 2.5rem;
}




/* Rental List */
#rentalList{}

#rentalList > .wrap > .listTableArea > .table > * > .tableRow {
	display: flex;
}
#rentalList > .wrap > .listTableArea > .table > * > .tableRow > div {
	/* padding-left: 3rem;
	padding-right: 2rem; */
}
#rentalList > .wrap > .listTableArea > .table > * > .tableRow > div:nth-child(1) {width: 14.5rem; padding-top: .5rem; padding-bottom: .5rem;}
#rentalList > .wrap > .listTableArea > .table > * > .tableRow > div:nth-child(2) {flex: 1;}
#rentalList > .wrap > .listTableArea > .table > * > .tableRow > div:nth-child(3) {width: 44.5rem;}
#rentalList > .wrap > .listTableArea > .table > * > .tableRow > div:nth-child(4) {width: 23.5rem;}
#rentalList > .wrap > .listTableArea > .table > .tableHead {
	font-size: 1.8rem;
	position: sticky;
	top: calc(var(--header-height) - .5rem);
	background-color: white;
	padding-top: 5rem;
	z-index: 50;
}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow {}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div {
	border: solid max(.1rem, 1px) var(--color-table-border-gray);
	border-bottom: solid max(.2rem, 2px) var(--color-DYFC-orange);
	text-align: center;
	padding-top: 2.8rem;
	padding-bottom: 2.8rem;
}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div:nth-child(n+2) {border-left: none;}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div::before {display: inline;}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div:nth-child(1)::before {display: none;}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div:nth-child(2)::before {content: var(--word-tableHead-tackle);}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div:nth-child(3)::before {content: var(--word-tableHead-fish);}
#rentalList > .wrap > .listTableArea > .table > .tableHead > .tableRow > div:nth-child(4)::before {content: var(--word-tableHead-guide);}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow {}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div {
	display: flex;
	border: solid max(.1rem, 1px) var(--color-table-border-gray);
	/* padding-top: 2.8rem;
	padding-bottom: 2.8rem; */
	border-top: none;
	justify-content: center;
	align-items: stretch;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb > img {width: 9rem;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > .fish-tmb > img[src*="d2bicon11.jpg"] {width: 10rem;}


#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div:nth-child(n+2) {border-left: none;}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > a {
	display: flex;
	width: 100%;
	z-index: 5;
	padding: 2.8rem 2.5rem;
	align-items: center;
	justify-content: center;
}
#rentalList > .wrap > .listTableArea > .table > .tableData > .tableRow > div > a:hover {background-color: #e0e0e0;}




/* Modal */
.modaal-wrapper .modaal-container {max-width: 80rem;}




/*============================================================================*/
}




/* - - - - - - - - - - - - - - - - - - -
https://---/rental-css.css
ID = {}
- - - - - - - - - - - - - - - - - - - */