@charset "UTF-8";
@import url("grid.css");

img {max-width:100%;height: auto;/*高さ自動*/}
a {display:block;color: #0080ff;text-decoration-line: underline;}
a:hover {color: #999;}
ul li{padding-left: 1em;text-indent: -1em;}

.ff-serif{font-family: serif;}

/*ヘッダー
-------------------------------------*/
h1 img {transform: scale(0.5);transform-origin: left;}
.header {display: flex;flex-direction: row;padding: 2rem 0 0 0;}
.header-box {margin-left: auto;margin-top: 8px;}
.contact-button {padding: 1rem;border: 2px solid #000;}
nav ul {display: flex;flex-direction: row;justify-content: space-around;list-style: none;margin: 1rem 0 0 0;}
.slider li {padding-left: 0 !important;}
nav li {flex: 1 0 auto;}
nav li a {text-decoration: none;text-align: center;width: 100%;color:#111;}
nav a:hover {background-color: #f7f7f7;    }
nav a {padding: 0.5rem;}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {display: none !important;z-index:10;}
#navi {display: block !important;margin-bottom: 1em;z-index:1;}
}

@media screen and (max-width: 768px){
.header {flex-direction: column;margin-bottom: 10px;}
.header #open,#close  {position: absolute;top: 20px;right: 12px;}
nav ul {flex-direction: column;}
.header li {padding-top: 0;}
h1 img {transform-origin: center;}

/* スマホ時はMENUボタンを表示 */
#open,#close  {display: block;width: 50px;border: none;position: absolute;top: 20px;right: 12px;z-index:10;}

/* スマホ時はメニューを非表示 */
#navi {display: none;z-index:1;}
}

/*メイン画像
-------------------------------------*/
.slick-slide img{width: 100vw;}
.mainimg img {width: 100vw;    margin-bottom: 0;}

/*メインコンテンツ
-------------------------------------*/
h2#itemname{font-size: 4rem;margin-bottom: .8em;}
main {margin: 5rem 0 0 0;}
.contents{max-width:700px;margin:1em auto;}
section {margin: 5rem 0;padding: 3rem 0;}
.gray-back {background-color: #f4f4f4;}


@media screen and (max-width: 768px){
.contents{margin:auto 1.6em;}
}

/*キャッチコピー
-------------------------------------*/
.catch {text-align: center;}
.catch h2 {padding-bottom: 1rem;}
.under {border-bottom: 0.4rem solid #333;padding:0 1rem 1rem 1rem;}
.center {text-align: center;margin-bottom: 4rem;}

/*申し込みの流れ
-------------------------------------*/
.flow.row {margin-bottom: 3rem;}

/*footer
-------------------------------------*/
footer .snsarea{margin: 1rem auto;text-align: center;}
footer .snsarea a{padding: 1rem;}
footer .snsarea a img{width: 45px;height: auto;}
footer {background-color: #f7f7f7;padding: 5rem 0;}
footer h4 {border-bottom: 3px solid #ccc;text-align:center;}
footer a {display: inline;}

/*お問い合わせ
-------------------------------------*/
#foot-form{text-align:center;margin:0 0 2em 0;}
#foot-form a{font-size: 18px;text-decoration: none;font-weight: bold;color:#fff;background: -webkit-gradient(linear, right top, left top, from(#008bcc), to(#056bc2));background: linear-gradient(to left, #008bcc 0%, #056bc2 100%);padding: 1.4em 3em;text-align: center;border-radius: 1em;display: inline-block;}
#foot-form a:hover{opacity:0.7;}

.contact-box {border: 1px solid #ccc;text-align: center;padding: 2rem 0;}
.table {margin: 4rem 0;}
.table th {width: 250px;}

/*コピーライト
-------------------------------------*/
.copyright {text-align: center;padding: 1rem 0;background-color: #000;}
.copyright a {color: #fff;text-decoration: none;display: inline;font-size: 13px;}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {position: fixed;bottom: 15px;right: 15px;}
#pagetop a {display: block;background: #000;color: #fff;width: 4em;height: 4em;line-height: 4em;border-radius: 4em;text-align: center;}
#pagetop a:hover {background: #666;}

/* ====================================
幅768px以下の表示
=====================================*/
@media screen and (max-width: 768px){
h2{margin-bottom: 1em;font-size: 2.3rem;}
h3{font-size: 2.0rem;}
h4{font-size: 1.8rem;}

h2#itemname{font-size: 3rem;line-height: 1;}

section{margin: 0;}

img{display: block;margin: 0 auto 1em auto;}
.slick-slide img{margin:0 !important;}

.scroll table{width:100%;}
.scroll{overflow: auto;white-space: nowrap;}
.scroll::-webkit-scrollbar{height: 5px;}
.scroll::-webkit-scrollbar-track{background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb {background: #BCBCBC;}

.sp-left p{text-align:left !important;}
.row.mt3{margin-top:1em !important;}

/* テーブル（table） */
.sp-table-vertically{width: 100% !important;}
.sp-table-vertically td,.sp-table-vertically th{display: block;width: 100% !important;text-align: center !important;}

/*ヘッダー
-------------------------------------*/
.header-box {display: none;}	
/*お問い合わせ
-------------------------------------*/
.table th {width: 100%;display: block;}
.table td {display: block;}

footer img {display: inline !important;width: 80% !important;height: inherit !important;aspect-ratio: unset !important;}
footer .snsarea a img {width: 45px !important;height: auto !important;}
}

/*====================================
共通スタイル
=====================================*/
.fc-red{color:#cc0000 !important;}
.fs-12{font-size:12px !important;}
.fs-14{font-size:14px !important;}
.fs-16{font-size:16px !important;}
.fs-18{font-size:18px !important;}

.fw-b{font-weight:bold !important;}

.ta-l{text-align:left !important;}
.ta-r{text-align:right !important;}
.ta-c{text-align:center !important;}

.span_block{display:block;}

.center {text-align: center;margin:auto;}

.maauto{margin:auto !important;}
.mrlauto{margin:0 auto !important;}
.mtbauto{margin:auto 0 !important;}
.ma0{margin:0 !important;}
.mt0{margin-top:0 !important;}
.ml0{margin-left:0 !important;}
.mr0{margin-right:0 !important;}
.mb0{margin-bottom:0 !important;}
.ma1{margin:1em !important;}
.mt1{margin-top:1em !important;}
.ml1{margin-left:1em !important;}
.mr1{margin-right:1em !important;}
.mb1{margin-bottom:1em !important;}
.ma2{margin:2em !important;}
.mt2{margin-top:2em !important;}
.ml2{margin-left:2em !important;}
.mr2{margin-right:2em !important;}
.mb2{margin-bottom:2em !important;}
.ma3{margin:3em !important;}
.mt3{margin-top:3em !important;}
.ml3{margin-left:3em !important;}
.mr3{margin-right:3em !important;}
.mb3{margin-bottom:3em !important;}
.ma4{margin:4em !important;}
.mt4{margin-top:4em !important;}
.ml4{margin-left:4em !important;}
.mr4{margin-right:4em !important;}
.mb4{margin-bottom:4em !important;}

.pa0{padding:0 !important;}
.pt0{padding-top:0 !important;}
.pl0{padding-left:0 !important;}
.pr0{padding-right:0 !important;}
.pb0{padding-bottom:0 !important;}
.pa1{padding:1em !important;}
.pt1{padding-top:1em !important;}
.pl1{padding-left:1em !important;}
.pr1{padding-right:1em !important;}
.pb1{padding-bottom:1em !important;}
.pa2{padding:2em !important;}
.pt2{padding-top:2em !important;}
.pl2{padding-left:2em !important;}
.pr2{padding-right:2em !important;}
.pb2{padding-bottom:2em !important;}
.pa3{padding:3em !important;}
.pt3{padding-top:3em !important;}
.pl3{padding-left:3em !important;}
.pr3{padding-right:3em !important;}
.pb3{padding-bottom:3em !important;}
.pa4{padding:4em !important;}
.pt4{padding-top:4em !important;}
.pl4{padding-left:4em !important;}
.pr4{padding-right:4em !important;}
.pb4{padding-bottom:4em !important;}