@charset "utf-8";

/* Page common */

.h2image { position: relative; width: 100%; max-width: 1100px; margin: 0 auto 220px auto;}
.h2image .h2inner { width: 100%; padding: 0 20px;}
.h2image .h2inner .box { position: relative; top: 100px; width: 100%; max-width: 880px; margin: 0 auto; margin-top: -200px; background: #fff; border-radius: 7px;}
.h2image .h2inner .box h2 { display: block; width: 100%; min-height: 100px; padding: 36px 0; color: #48C4CB; font-size: 36px; font-weight: bold; line-height: 44px;}
.h2image .h2inner .box h2 br { display: none;}
.h2image .h2inner .box .lead { padding: 0 40px;}
.h2image .h2inner .box .lead p { line-height: 175%; text-align: left;}
.h2image .h2inner .box .lead p.figure { margin: 20px 0;}

.h3star { display: inline-block; width: 100%; margin: 0 auto 20px auto; text-align: center;}
.h3star h3 { position: relative; display: inline-block; color: #48C4CB; font-size: 28px; font-weight: bold; line-height: 36px;}
.h3star h3 br.mb { display: none;}
.h3star h3::before { position: absolute; left: -104px; top: 50%; display: block; width: 74px; height: 21px; margin-top: -10px; background: url("../images/h2left.png") center center no-repeat; background-size: contain; content: '';}
.h3star h3::after { position: absolute; right: -104px; top: 50%; display: block; width: 74px; height: 21px; margin-top: -10px; background: url("../images/h2right.png") center center no-repeat; background-size: contain; content: '';}

.h4check { position: relative; width: 100%; padding-left: 30px; margin-bottom: 20px; border-bottom: 2px #48C4CB solid; text-align: left;}
.h4check:before { position: absolute; display: inline-block; margin-top: 3px; margin-left: -30px; color: #48C4CB; width: 22px; height: 22px; background: url("../images/icon-check.png") center center no-repeat; background-size: contain; content: '';}
.h4check h4 { font-size: 22px; font-weight: bold; line-height: 30px;}

@media screen and (max-width: 767px){
	.h2image { margin: 0 auto 180px auto;}
	.h2image .h2inner .box h2 { font-size: 28px; line-height: 36px;}
	.h3star { margin: 0 auto 40px auto;}
}
@media screen and (max-width: 639px){
	.h2image { margin: 0 auto 130px auto;}
	.h2image .h2inner { padding: 0 10px;}
	.h2image .h2inner .box { top: 60px; padding: 0 10px; margin-top: -120px;}
	.h2image .h2inner .box h2 { font-size: 24px; line-height: 30px;}
	.h2image .h2inner .box .lead { padding: 0;}
}
@media screen and (max-width: 479px){
	.h2image .h2inner .box { background: rgba(255,255,255,0.9);}
	.h2image .h2inner .box h2 { padding: 36px 0 0 0;}
	.h2image .h2inner .box h2 br { display: block;}
	.h3star { margin: 0 auto 20px auto;}
	.h3star h3 { width: 78%; margin: 0 auto; font-size: 20px; line-height: 24px;}
	.h3star h3 br.mb { display: block;}
	.h3star h3::before { position: absolute; left: -10%; top: 50%; width: 10%; }
	.h3star h3::after { position: absolute; right: -10%; top: 50%; width: 10%; }
}

.trapezoidWrap { width: 100%; margin-bottom: 50px;}
.trapezoidWrap .box { padding: 0 0.25%; float: left;}
.trapezoidWrap .box p, .trapezoidWrap .box a { display: block; width: 100%; height: 56px; text-align: center; line-height: 56px; transform: skew(-20deg);}
.trapezoidWrap .box p { background: #48C4CB; color: #fff;}
.trapezoidWrap .box a { background: #fff; border: 1px #48C4CB solid; color: #48C4CB;}
.trapezoidWrap .box a:hover { background: #D1F0F2;}
.trapezoidWrap .box p span, .trapezoidWrap .box a span { display: inline-block; font-size: 18px; font-weight: bold;  transform: skew(20deg);}

@media screen and (max-width: 767px){
	.trapezoidWrap { margin-bottom: 40px;}
	.trapezoidWrap .box { width: 90% !important; margin-bottom: 5px; padding: 0 0 0 10%; float: none;}
	.trapezoidWrap .box p, .trapezoidWrap .box a { height: 40px; line-height: 40px;}
	.trapezoidWrap .box p span, .trapezoidWrap .box a span { font-size: 16px;}


}
@media screen and (max-width: 479px){
	.trapezoidWrap { margin-bottom: 30px;}
	.trapezoidWrap .box { width: 95% !important;padding-left: 5%;}
	.trapezoidWrap .box p span.s, .trapezoidWrap .box a span.s { font-size: 14px;}

}

.corumnWrap { display: table; table-layout: fixed; width: 100%;}
.corumnWrap .box { display: table-cell; padding: 0 10px; vertical-align: top;}
.corumnWrap .box img { border: 1px #48C4CB solid; border-radius: 5px;}
.corumnWrap .box.text { text-align: left;}
.corumnWrap .box.text p { margin-bottom: 1em; font-size: 18px; line-height: 180%;}

@media screen and (max-width: 767px){
	.corumnWrap .box { display: block;}
	.corumnWrap .box.text p { font-size: 16px;}
}


.checkList { width: 100%; max-width: 800px; margin: 0 auto 80px auto;}
.checkList ul { width: 100%; padding-left: 2em; font-size: 20px; text-align: left; line-height: 130%;}
.checkList ul li { margin-bottom: 20px;}
.checkList ul li:before { display: inline-block; width: 20px; height: 20px; margin-left: -2em; margin-right: 1em; background: url("../images/icon-check.png") center center no-repeat; background-size: contain; content: '';}
.checkList.s ul { padding-left: 1.25em;}
.checkList.s ul li:before { margin-left: -1.25em; margin-right: 0.25em;}

@media screen and (max-width: 767px){
	.checkList { margin: 0 auto 60px auto;}
	.checkList ul, .checkList.s ul { font-size: 18px;}

}
@media screen and (max-width: 479px){
	.checkList { margin: 0 auto 30px auto;}
}

table.default { width: 100%; margin-bottom: 100px;}
table.default tr th, table.default tr td { padding: 30px; border: 2px #fff solid; font-size: 18px; vertical-align: middle;}
table.default tr th { width: 240px; background: #48C4CB; color: #fff; text-align: center;}
table.default tr td { background: #D9F5F7; text-align: left;}

@media screen and (max-width: 767px){
	table.default { margin-bottom: 80px;}
	table.default tr th, table.default tr td { padding: 20px; font-size: 16px;}
	table.default tr th { width: 160px;}
}
@media screen and (max-width: 479px){
	table.default { margin-bottom: 30px;}
	table.default tr th, table.default tr td { display: block; width: 100%; padding: 10px; border: none;}
}


.openableList { width: 100%; max-width: 930px; margin: 0 auto 100px auto;}
.openableList ul li { min-height: 54px; margin-bottom: 20px; text-align: left;}
.openableList ul li dl dt { position: relative; border-bottom: 2px #48C4CB solid; font-size: 24px; font-weight: bold; line-height: 54px;}
.openableList ul li dl dt .number { display: block; width: 54px; height: 100%; background: #48C4CB; color: #fff; font-weight: bold; text-align: center; float: left;}
.openableList ul li dl dt .text { margin-left: 92px; font-weight: bold;}
.openableList ul li dl dt:after { position: absolute; top: 0; right: 30px; height: 54px; color: #48C4CB; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f078";}
.openableList ul li dl dt.open:after { content: "\f077";}
.openableList ul li dl dt:hover { cursor: pointer;}
.openableList ul li dl dd { display: none; padding: 32px 64px; background: #D9F5F7;}

@media screen and (max-width: 767px){
	.openableList { padding: 0 10px;margin: 0 auto 60px auto;}
	.openableList ul li { min-height: 40px; margin-bottom: 10px;}
	.openableList ul li dl dt { font-size: 22px; line-height: 40px;}
	.openableList ul li dl dt .number { width: 40px;}
	.openableList ul li dl dt .text { margin: 0 40px 0 50px;}
	.openableList ul li dl dt:after { right: 10px; height: 40px;}
	.openableList ul li dl dd { padding: 20px 40px;}
}
@media screen and (max-width: 479px){
	.openableList ul li dl dt { font-size: 20px;}
	.openableList ul li dl dd { padding: 10px;}
}


.middleBanner { display: table; table-layout: fixed; width: 100%; margin-bottom: 60px;}
.middleBanner .box { display: table-cell;}
.middleBanner .box a { display: block; width: 100%; max-width: 478px; height: 106px; margin: 0 auto; padding-left: 100px; border: 1px #48C4CB solid; border-radius: 5px; color: #48C4CB; font-size: 24px;line-height: 106px;}
.middleBanner .box.monitor a { background: url("../images/middle-banner-monitor.png") top left no-repeat; background-size: contain; }
.middleBanner .box.voice a { background: url("../images/middle-banner-voice.jpg") top left no-repeat; background-size: contain; }
.middleBanner .box.color a { background: url("../images/middle-banner-color.jpg") top left no-repeat; background-size: contain; }

.reserveBanner { width: 100%; margin-bottom: 100px;}
.reserveBanner a { display: block; width: 100%; max-width: 506px; height: 74px; margin: 0 auto; border: 1px #48C4CB solid; border-radius: 5px; color: #48C4CB; font-size: 24px;line-height: 74px;}

.atelierBanner { width: 100%; margin-bottom: 100px;}
.atelierBanner a { display: inline-block; margin: 0 auto;}
.atelierBanner a img { border: 1px #48C4CB solid; border-radius: 5px; }

@media screen and (max-width: 767px){
	.middleBanner { margin-bottom: 0; padding: 0 10px;}
	.middleBanner .box { display: block; margin-bottom: 10px;}
	.middleBanner .box a { height: 80px; line-height: 80px;}
	.reserveBanner { width: 100%; margin-bottom: 50px; padding: 0 10px;}
	.reserveBanner a { max-width: 478px;}
	.atelierBanner { margin-bottom: 50px; padding: 0 10px;}
}

@media screen and (max-width: 479px){
	.middleBanner .box a { height: 60px; padding-left: 60px; line-height: 60px; font-size: 18px;}
	.reserveBanner a { height: 60px; line-height: 60px; font-size: 18px;}

}




/* CSS memo

Font Awesome
https://fontawesome.com/icons?d=gallery&m=free

Solid 			 font-family: "Font Awesome 5 Free"; content: "\";
Regular, Light	 font-family: "Font Awesome 5 Pro"; content: "\";
Duotone 		 font-family: "Awesome 5 Duotone"; content: "\";
Brands           font-family: "Font Awesome 5 Brands"; content: "\";




角丸
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;

テキストシャドウ
text-shadow:1px 1px 3px #666;
text-shadow:1px 1px 3px #666; text-shadow:-1px 1px 3px #666; text-shadow:1px -1px 3px #666; text-shadow:-1px -1px 3px #666;

ボックスシャドウ
-moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;

ボックスシャドウ内側
-moz-box-shadow: inset 1px 1px 3px #666; -webkit-box-shadow: inset 1px 1px 3px #666; box-shadow: inset 1px 1px 3px #666;

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;

要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;

背景のみ透明
background-color:rgba(255,255,255,0.2);

:first-child
:last-child
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用


テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

要素を横スクロール
.scroll { width: 100%; padding-bottom: 10px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;}

その他メモ JavaScript
javascript:void(0);
javascript:history.back();

画像の縦長自動調整
img { max-width: 100%; max-height: 100%; height: 100vh; width: auto\9; margin: 0 auto;}

WPページナビ
.wp-pagenavi { text-align: center;}
.wp-pagenavi span, .wp-pagenavi a { display: inline-block; width: 32px; height: 32px; border: 1px #2E7BB1 solid; color: #2E7BB1; font-size: 14px; text-align: center; line-height: 32px;}
.wp-pagenavi span.pages { width: auto; padding: 0 8px;}
.wp-pagenavi .current { background: #2E7BB1; color: #fff;}

背景を左右で分ける（左から0～50％と50％～100％）
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

CSS memo */