@charset "utf-8";
@media print, screen and (max-width:768px){
/*===============================================================================================
CONTENTS BASIC
===============================================================================================*/
.section_basic {padding: 9% 0 0;}

/* --------------------------------------------------------------------------------------- */
.section_basic, .custom_basic {width: 90%;}

/* --------------------------------------------------------------------------------------- */
#onePeriod {font-size: 15px; margin-bottom: 45px;}
#onePeriod p {margin-bottom: 15px;}

@media print, screen and (max-width:414px){
#onePeriod {font-size: 14px;}
}
@media print, screen and (max-width:375px){
#onePeriod {font-size: 13px;}
}
@media print, screen and (max-width:320px){
#onePeriod {font-size: 12px;}
}

/* --------------------------------------------------------------------------------------- */
#sectionTitle {margin-bottom: 30px;}
#sectionTitle img {width: 50%;}
#sectionCatch {width: 50%; margin-bottom: 15px;}

@media print, screen and (max-width:414px){
#sectionTitle img {width: 70%;}
#sectionCatch {width: 80%;}
}

/*===============================================================================================
#FIRST VIEW
===============================================================================================*/
#firstView {top: 70px;}

/* --------------------------------------------------------------------------------------- */
@media print, screen and (min-width:415px) and (max-width:768px){
.for_sp02 {display: none !important;}


ul#visualList li {background-position: left bottom; background-size: 120%;}
ul#visualList li#View01 {background-image: url('../img/firstview/firstview.jpg');}

#view_catchBox {top: 45%;left: 50%;}
#mainVisual img {padding: 30px 0;}

#visualCacth,#captionBox {width: 45%;}
#visualCacth {margin-bottom: 9%;}
}

/* --------------------------------------------------------------------------------------- */
@media print, screen and (max-width:414px){

#firstView {position: relative; z-index: 1;}

.for_tb {display: none !important;}

ul#visualList li#View01 {background-image:none;}

#view_catchBox {top: 50%;left: 50%;height: 90%; width: 100%;}
#visualCacth,#captionBox {
position: absolute;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#visualCacth {
top: 30%;
left: 5%;
width: 80%;
filter: drop-shadow(2px 2px 8px rgba(255,255,255,.8));
}

#captionBox {top: 80%; right: 0%; width: 80%;}
}

/*===============================================================================================
Background
===============================================================================================*/
#capName {font-size: 20px; padding-bottom: 10px; margin-bottom: 15px; width: 65%;}

@media print, screen and (max-width:414px){
#capName {font-size: 18px;}
}
@media print, screen and (max-width:375px){
#capName {font-size: 16px;}
}
@media print, screen and (max-width:320px){
#capName {font-size: 15px;}
}


/* --------------------------------------------------------------------------------------- */
ul#photoList {letter-spacing: -.4em; font-size:0; margin-top: 30px;} 
ul#photoList li {letter-spacing: 0; vertical-align: top; display: inline-block; width: 48%; margin-right: 4%; font-size: 100%;}
ul#photoList li:nth-of-type(even) {margin-right: 0;}

@media print, screen and (max-width:414px){
ul#photoList {letter-spacing:0;} 
ul#photoList li {display: block; width:100%; margin:0 auto 15px;}
ul#photoList li:nth-of-type(even) { margin:0 auto 15px;}
ul#photoList li:last-of-type {margin-bottom: 0;}
}

/*===============================================================================================
SERVICE
===============================================================================================*/
ul#serviceList li {margin-bottom:30px; padding: 9% 0;}
ul#serviceList li:before {width:100%; -moz-opacity: .4; opacity: .4; background-position: center top;}

/* --------------------------------------------------------------------------------------- */
#serviceHeadline { width: 75%; margin-bottom: 15px; }
ul#serviceList li#Act02 #serviceHeadline { width: 68% }

section#Service #onePeriod.custom_basic {margin:0 auto; width: 90%;}


/*===============================================================================================
PRICE
===============================================================================================*/
table#price_tableBody {margin-bottom: 45px;}
table#price_tableBody tr {display: block; width: 100%; height: auto; margin: 0 auto 30px;}
table#price_tableBody tr:last-of-type {margin-bottom: 0;}

table#price_tableBody th, table#price_tableBody td { border: 2px solid #1B439A; display: block;}
table#price_tableBody th {text-align: center; background: #1B439A; color: #fff; border-bottom: 0;padding: 5px 10px;}
table#price_tableBody th, table#price_tableBody th p {color: #fff;}
table#price_tableBody th, .fee {font-size: 18px; text-align: center;}
.notes, .fee span  {font-size: 14px;}
.fee span {padding-left:15px;}


table#price_tableBody td {border-top:0; padding: 10px;}
table#price_tableBody td p { margin-bottom: 5px;}
table#price_tableBody td p:last-of-type {margin-bottom: 0;}


@media print, screen and (max-width:414px){
table#price_tableBody th, .fee {font-size: 16px;}
.notes,.fee span {font-size: 13px;}
}
@media print, screen and (max-width:375px){
table#price_tableBody th, .fee {font-size: 15px;}
.notes,.fee span  {font-size: 12px;}
}@media print, screen and (max-width:320px){
table#price_tableBody th, .fee {font-size: 14px;}
.notes,.fee span  {font-size: 11px;}
}


/* --------------------------------------------------------------------------------------- */
#priceInfo {padding: 15px 5%;}
#priceInfo p {font-size: 14px;}


@media print, screen and (max-width:414px){
#priceInfo p {font-size: 13px;}
}
@media print, screen and (max-width:375px){
#priceInfo p {font-size: 12px;}
}
@media print, screen and (max-width:320px){
#priceInfo p {font-size: 11px;}
}


/*===============================================================================================
RECRUIT
===============================================================================================*/
#recruitContainer {padding: 6% 0 2%; background-position: center top; background-size: 200%; background-color: #d7f8fa;}
#recruitContainer #onePeriod {width: 90%;}

@media print, screen and (max-width:414px){
#recruitContainer #onePeriod.center {text-align: left !important;}
}

/* --------------------------------------------------------------------------------------- */
.check_inner {padding: 6% 6% 9%; text-align: center;}

/* --------------------------------------------------------------------------------------- */
#recruitHeadline {font-size: 22px; margin-bottom: 15px;}

@media print, screen and (max-width:414px){
#recruitHeadline {font-size: 20px; }
}
@media print, screen and (max-width:375px){
#recruitHeadline {font-size: 18px; }
}
@media print, screen and (max-width:320px){
#recruitHeadline {font-size: 16px; }
}


/* --------------------------------------------------------------------------------------- */
ul#checkList {padding-bottom: 15px; margin-bottom: 15px; display: inline-block; }
ul#checkList li {font-size: 16px; margin-bottom: 30px; padding-left: 30px; text-align: left;}
ul#checkList p {font-size: 16px;}

ul#checkList li:before {top: 14px; margin-top: -5px; width: 16px;height: 16px;}


@media print, screen and (max-width:414px){
ul#checkList li {padding-left: 20px;}
ul#checkList li, ul#checkList p {font-size: 14px;}
ul#checkList li:before {width:14px;height: 14px; top: 12px;}
}
@media print, screen and (max-width:375px){
ul#checkList li, ul#checkList p {font-size: 13px;}
ul#checkList li:before {width:13px;height: 13px; top: 10px;}
}
@media print, screen and (max-width:320px){
ul#checkList li, ul#checkList p {font-size: 12px;}
ul#checkList li:before {width:12px;height: 12px;}
}



/* --------------------------------------------------------------------------------------- */
#check_capBox {width: 92%;}
#check_capBox p {font-size: 14px !important;}

@media print, screen and (max-width:414px){
#check_capBox p {font-size: 13px !important;}
}
@media print, screen and (max-width:375px){
#check_capBox p {font-size: 12px !important;}
}
@media print, screen and (max-width:320px){
#check_capBox p {font-size: 11px !important;}
}
/* --------------------------------------------------------------------------------------- */
#Serach {width: 100%; margin-top: 15px;}


/*===============================================================================================
CONTACT
===============================================================================================*/
#contactMap {margin-bottom: 45px; padding-bottom: 45%;}

/* --------------------------------------------------------------------------------------- */
#contactAdd {font-size: 15px;}
#contactAdd p {margin-bottom: 15px;}

@media print, screen and (max-width:414px){
#contactAdd {font-size: 14px;}
}
@media print, screen and (max-width:375px){
#contactAdd {font-size: 13px;}
}
@media print, screen and (max-width:320px){
#contactAdd {font-size: 12px;}
}

/*===============================================================================================
INNER PAGE
===============================================================================================*/
#pageTitle {font-size: 22px; margin-bottom: 30px;}

@media print, screen and (max-width:414px){
#pageTitle {font-size: 20px;}
}
@media print, screen and (max-width:375px){
#pageTitle {font-size: 18px;}
}
@media print, screen and (max-width:320px){
#pageTitle {font-size: 16px;}
}


/* --------------------------------------------------------------------------------------- */
@media print, screen and (max-width:414px){
table#infoTable td, table#infoTable tr:last-of-type th {border-top:0;}
}



/* --------------------------------------------------------------------------------------- */
table#infoTable th, table#infoTable td,
table#infoTable th p, table#infoTable td p {font-size: 12px;}
table#infoTable td p {margin-bottom: 15px;}

table#infoTable th, table#infoTable td {vertical-align: middle;}
table#infoTable th {text-align: center; padding: 30px 10px; width:30%;}
table#infoTable td { padding: 30px 3%; width: 70%;}

@media print, screen and (max-width:414px){
table#infoTable th, table#infoTable td {display:block; width: inherit;}
table#infoTable th {padding:10px 0;}
table#infoTable td {padding:15px 10px;}
table#infoTable th, table#infoTable th p {font-size: 13px;}
table#infoTable td, table#infoTable td p {font-size: 12px;}
}
@media print, screen and (max-width:375px){
table#infoTable th, table#infoTable th p {font-size: 12px;}
table#infoTable td, table#infoTable td p {font-size: 11px;}
}
@media print, screen and (max-width:320px){
table#infoTable td, table#infoTable td p {font-size: 10px;}
}

/*===============================================================================================
INNER PAGE：PRIVACY POLICY
===============================================================================================*/
@media print, screen and (max-width:414px){
#Privacy table#infoTable th, #Privacy table#infoTable th p {font-size: 12px;}
#Privacy table#infoTable td, #Privacy table#infoTable td p {font-size: 11px;}
}
@media print, screen and (max-width:375px){
#Privacy table#infoTable th, #Privacy table#infoTable th p {font-size: 11px;}
#Privacy table#infoTable td, #Privacy table#infoTable td p {font-size: 10px;}
}
@media print, screen and (max-width:320px){
#Privacy table#infoTable th, #Privacy table#infoTable th p {font-size: 10px;}
#Privacy table#infoTable td, #Privacy table#infoTable td p {font-size: 9px;}
}



/*===============================================================================================
2024/05/29 
===============================================================================================*/

ul#bookList li {width: 100%; margin:0 auto 6%;}
ul#bookList li:last-of-type {margin-bottom: 0;}


/* --------------------------------------------------------------------------------------- */
dl.book_container{display: flex; display: flex; flex-wrap: wrap; align-items:center;}
dl.book_container dt {width: 45%; margin-right: 4%;}
dl.book_container dd {width: 51%;}


/* --------------------------------------------------------------------------------------- */
.info_top {margin-bottom: 1em;}

.book_title {font-size: 16px; padding-bottom: 5px; margin-bottom: 5px;}
.book_data {font-size: 11px;}
.book_information {font-size: 13px;}

@media print, screen and (max-width:480px){
.book_title {font-size: 3.5vw;}
.book_data {font-size: 2.8vw;}
.book_information {font-size: 3vw;}
}


}