@charset "utf-8";

/*-------------------
#under-mvリセット
---------------------*/
#page-price #under-mv{ min-height: 300px;}
#page-price #under-mv .inner-wrap { padding: 24vh 3% 50px;}
#page-price #under-mv .inner-wrap .txt{ max-width: 360px;}
#page-price #under-mv .inner-wrap .txt span { margin-top: 20px;}
#page-price #under-mv #page-main{ padding-top: 30px;}

/**/
#page-price .imgBox{ width: 100%; height: 200px; background: #ddd; border-radius: 4px; margin: 0 0 20vh; position: relative; overflow: hidden; margin: 80px 0 30px;}
#page-price .imgBox .bkImg{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1;}
#page-price .imgBox::before, 
#page-price .imgBox::after{ width: 100%; height: 100%; position: absolute; right: 0; top: 0; content: ""; }
#page-price .imgBox::before{ z-index: 10; background: var(--about-color); opacity: 0.8; animation: page-mv2 2.2s 1 forwards; }
#page-price .imgBox::after{ z-index: 15; background: #fff; animation: page-mv1 2.2s 1 forwards; }
#page-price .imgBox .bkImg{ background: url("../../img/about/mb01.webp") 50% 100% no-repeat #fff; background-attachment: fixed; background-size: cover; opacity: 0.8;}
_::-webkit-full-page-media, _:future, :root #page-mv .inner .imgBox .bkImg { background-attachment:inherit;}

.backgroundimage{ opacity: 0;}
.scroll .backgroundimage{ opacity:1;}

#info, 
#info2, 
#price-list{ background: #fff;}

/*-------------------
#info
---------------------*/
#info { padding-bottom: 50px;}
#info #info-1{ display: flex; flex-direction: row; align-items: flex-start; padding: 0 5%; }
#info #info-1 h2{ display: flex; flex-direction: column; margin-right: 40px;}
#info #info-1 h2 .txtIn::after{ color:#588E82; }
#info #info-1 h2, 
#info #info-1 h2 *{ font-size: 26px; font-weight: 300;}
#info #info-1 p{ flex: 1; display: flex; flex-direction: column;}
#info #info-1 p span{ display: block; margin-bottom: 15px; font-size: 14px;}

@media screen and (max-width: 1000px){
#info #info-1{ flex-direction: column;}
#info #info-1 h2{ flex-direction: row; margin-right: 0; margin-top: 0; margin-bottom: 20px;}
}
@media screen and (max-width: 700px){
#info { padding: 30px 0 70px;}
}
@media screen and (max-width: 600px){
#info #info-1 h2{ display: flex; flex-direction: column; margin-right: 40px; margin-top: 5px;}
#info #info-1 h2, 
#info #info-1 h2 *{ font-size: 8.0vw;}
.setView.txtIn::after { clip: rect(0, 500px, 200px, 0) !important;}
}


/*-------------------
#info2
---------------------*/
/**/
#info2{ width: 100%; display: flex; flex-direction: column; padding: 0 2% 40px; }
#info2 .itemBox{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;} 
#info2 .itemBox .item{ width: 25%; padding: 20px; border-right: solid 1px #ccc; display: flex; flex-direction: column; align-items: center;} 
#info2 .itemBox .item:last-child{ border-right: none;}
#info2 .itemBox .item h3{ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
#info2 .itemBox .item h3 .eng, 
#info2 .itemBox .item h3 .eng *{ font-weight: 300; font-size: 12px; color: #999; line-height: 1em;}
#info2 .itemBox .item h3 .jpn{ margin-bottom: 5px;}
#info2 .itemBox .item h3 .jpn, 
#info2 .itemBox .item h3 .jpn *{ font-weight:700; font-size: 14px; color: #555; line-height: 1.8em;}
#info2 .itemBox .item ul{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
#info2 .itemBox .item ul li{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 11px; margin: 4px 0;}
#info2 .itemBox .item ul li:last-child{ padding-bottom: 50px;}
#info2 .itemBox .item ul li p{ display: flex; justify-content: flex-start; margin: 4px 0;}
#info2 .itemBox .item ul li span{ display: block; line-height: 1.2em; font-size: 12px; padding-right: 3px;}
#info2 .itemBox .item ul li span.t1{ color: #000;}
#info2 .itemBox .item ul li span.t1::after{ content: ":";}
#info2 .itemBox .item ul li span.t2{ color: #111;}
#info2 .itemBox .item ul li a{ width: 100px; height: 26px; position: absolute; bottom: 6px; left: 50%; margin-left: -50px; display: flex; justify-content: center; align-items: center; font-size: 11px; border-radius: 3px; border: solid 1px #ccc; color: #666; background: #fff;}
#info2 .itemBox .item ul li a:hover{ border: solid 1px #222; color: #fff; background: #555;}
@media screen and (max-width: 1000px){
#info2 .itemBox .item ul li{ font-size: 12px; letter-spacing: 0;}
}
@media screen and (max-width: 900px){
#info2 .itemBox .item{ width: 50%; padding: 30px 10px;}
#info2 .itemBox .item:nth-child(2){ border-right: none;}
#info2 .itemBox .item:nth-child(3), 
#info2 .itemBox .item:nth-child(4){ border-top: solid 1px #ccc;}
#info2 .itemBox .item ul li{ margin: 2px 0;}
}
@media screen and (max-width: 600px){
#info2 .itemBox .item:nth-child(1), 
#info2 .itemBox .item:nth-child(2){ padding-top: 20px;}
#info2 .itemBox .item h4 .eng, 
#info2 .itemBox .item h4 .eng *{ font-size: 5.2vw;}
#info2 .itemBox .item h4 .jpn, 
#info2 .itemBox .item h4 .jpn *{ font-size: 3.2vw;}
#info2 .itemBox .item ul li{ font-size: 2.8vw; letter-spacing: 0;}
}












/*-------------------
#price-list
---------------------*/
#price-list{ padding-bottom: 60px;}
#price-list h3{ display: flex; padding-left: 10px; border-left: solid 6px #B9D4CE; margin-bottom: 10px;}
#price-list h3 span{ font-size: 14px; font-weight: bold;}
#price-list .inner{ max-width: 1000px; padding: 0 3%;}
#price-list .inner .wrap{ padding: 30px 0;}
#price-list .inner .wrap .cap{ width: 100%; display: block; font-size: 11px; color: #777; font-weight: 400;}
/*テーブル*/
#price-list .table-wrap { width:100%; max-width: 100%; display: block; overflow-x: auto; overflow-y: hidden;}
#price-list .table-wrap table{ width:100%; margin-bottom: 5px;}
#price-list .table-wrap table thead{}
#price-list .table-wrap table thead tr{}
#price-list .table-wrap table thead tr th{ font-size: 12px; padding: 16px 10px; background:#EBF3F1; border: solid 1px #d5d5d5;}

#price-list .table-wrap table tbody{}
#price-list .table-wrap table tbody tr{}
#price-list .table-wrap table tbody tr th, 
#price-list .table-wrap table tbody tr td{ border: solid 1px #d5d5d5; font-size: 13px; vertical-align: middle;}
#price-list .table-wrap table tbody tr th{ text-align: left;}
#price-list .table-wrap table tbody tr th .kome::before { content: "※"; font-size: 9px; color: #777; margin: 0 1px 1px 2px;}
#price-list .table-wrap table tbody tr td{ text-align: center; }
#price-list .table-wrap table tbody tr th { padding: 10px 20px; white-space: nowrap;}
#price-list .table-wrap table tbody tr td:nth-child(2){ width: 140px; white-space: nowrap; font-family:Arial; color: #555; font-weight: 200;}
#price-list .table-wrap table tbody tr td:nth-child(3){ width: 80px; white-space: nowrap;}
#price-list .table-wrap table tbody tr td:nth-child(4){ width: 370px; padding: 10px; font-size: 12px; text-align: left; line-height: 1.2em;}
#price-list .table-wrap table tbody tr td .yen{ font-size: 10px;}
#price-list .table-wrap table tbody tr td .yen span{ font-size: 8px; color: #333; letter-spacing: 0;}

@media screen and (max-width: 800px){
#price-list .table-wrap{ margin-bottom: 10px;}
#price-list .table-wrap table{ width:auto; margin-bottom: 5px;}
#price-list .table-wrap table tbody tr th, 
#price-list .table-wrap table tbody tr td{ font-size: 12px;}
#price-list .table-wrap table tbody tr th { padding: 10px; white-space: nowrap;}
#price-list .table-wrap table tbody tr td:nth-child(2){ width: 120px; min-width: 120px; white-space: nowrap; font-family:Arial; color: #555; font-weight: 200;}
#price-list .table-wrap table tbody tr td:nth-child(3){ width: 60px; min-width: 60px; white-space: nowrap;}
#price-list .table-wrap table tbody tr td:nth-child(4){ width: 350px; min-width: 350px; font-size: 11px;}
}
@media screen and (max-width: 700px){
#price-list .table-wrap{ padding-bottom: 24px; position: relative;}
#price-list .table-wrap::after { background: #ddd; content: "表は右へスワイプ可能です →"; font-size: 10px; line-height: 12px; position: absolute; left:5px; bottom: 5px; color: #444; padding: 2px 5px; border-radius: 2px;}
	
}