@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ width: 100%; vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@media (max-width: 481px) {
}



/*		font-style
-------------------------------------------------- */
html{	font-size: 10px;}
body {
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
/*	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;*/
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}

@keyframes moving{
	% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	30% {
		-webkit-transform: scale3d(1.06, 0.94, 1);
		transform: scale3d(1.06, 0.94, 1);
	}
	40% {
		-webkit-transform: scale3d(0.94, 1.06, 1);
		transform: scale3d(0.94, 1.06, 1);
	}
	50% {
		-webkit-transform: scale3d(1.04, 0.96, 1);
		transform: scale3d(1.04, 0.96, 1);
	}
	65% {
		-webkit-transform: scale3d(0.96, 1.04, 1);
		transform: scale3d(0.96, 1.04, 1);
	}
	75% {
		-webkit-transform: scale3d(1.02, 0.98, 1);
		transform: scale3d(1.02, 0.98, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}



#hd { position: absolute; width: 100%; left: 0; top: 0; background: #fff; z-index: 10;}
#hd .inner-hd { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 960px; margin: 0 auto; padding: 15px 20px; border-bottom: solid 3px #bb8f31;}
#hd .logo { width: 30%; max-width: 250px;}
#hd .logo h1 { width: 100%;}
#hd .logo h1 img { width: 100%;}
#hd .tel { width: 45%;}
#hd .tel a{ display: none;}
@media (max-width: 481px) {
	#hd .inner-hd { padding: 6px 12px; border-width: 2px;}
	#hd .tel span { display: none;}
	#hd .tel a { display: block;}
}

.bg-1 { background: url('../img/bg-ptn-1.jpg')}
.bg-2 { background: url('../img/bg-ptn-2.jpg')}
.bg-3 { background: url('../img/bg-ptn-3.jpg')}
.bg-4 { background: url('../img/bg-ptn-4.jpg')}
@media (max-width: 481px) {
	.bg-1 { background-size: 80px 80px;}
	.bg-2 { background-size: 80px auto;}
	.bg-3 { background-size: 60px 60px;}
	.bg-4 { background-size: 80px auto;}
}

.wrap { width: 100%; max-width: 960px; margin: 0 auto;}
#trial-1 { position: relative;}
#trial-1 p { position: relative; z-index: 1;}
#trial-1 .btn { position: absolute; left: 0; bottom: 45px; width: 100%; z-index: 2;}
#trial-1 .btn a { display: block; width: 80%; margin: 0 auto;
 border-radius: 100px; overflow: hidden; box-shadow: 0 0 12px #333; background: #fff; animation: 1.6s moving infinite;
}
#trial-1 .btn a img { transition: 0.2s linear;}
#trial-1 .btn a:hover img { opacity: 0.8;}
@media (max-width: 641px) {
	#trial-1 .btn { bottom: 30px;}
}
@media (max-width: 481px) {
	#trial-1 .btn { bottom: 18px;}
}


#before .inner-sct { width: 95%; margin: 0 auto; padding: 80px 0 40px;}
#before p { margin-bottom: 10px;}
#before ul { width: 92%; margin: 0 auto;}
#before ul li { padding-left: 20px; font-size: 15px; text-indent: -15px;}
@media (max-width: 641px) {
	#before .inner-sct { padding: 40px 0;}
	#before ul li { padding-left: 12px; text-indent: -15px; font-size: 11px;}
}

#reason {}
#reason .inner-sct { background: url('../img/bg-reason.png') no-repeat 50% 0 / 100% auto; padding: 80px 0;}
#reason h2 { margin-bottom: 30px; text-align: center;}
#reason h2 img { width: 72%; max-width: 700px;}
#reason ul { width: 92%; margin: 0 auto;}
#reason ul li { margin-bottom: 40px; padding-top: 40px;}
#reason ul li dl { position: relative; padding: 60px 40px 30px; background: #fff; border-radius: 6px; box-shadow: 0 0 15px #aaa;}
#reason ul li dl dt { position: absolute; left: 0; top: -40px; width: 100%;}
#reason ul li dl dt span { display: block; width: 32%; max-width: 250px; margin: 0 auto; box-shadow: 0 0 10px #aaa;
 background: linear-gradient(#fff100,#fff772); border-radius: 6px;
}
#reason ul li dl dd.txt { padding-top: 40px; font-size: 34px;}
#reason ul li dl dd.note{ padding-left: 30px; font-size: 24px; text-indent: -25px;}
@media (max-width: 901px) {
	#reason ul li dl dd.txt { padding-top: 30px; font-size: 30px;}
	#reason ul li dl dd.note{ padding-top: 8px; padding-left: 20px; font-size: 20px; text-indent: -20px;}
}
@media (max-width: 641px) {
	#reason .inner-sct { padding: 50px 0;}
	#reason ul li { padding-top: 20px;}
	#reason ul li dl { padding: 50px 30px 20px;}
	#reason ul li dl dt { top: -30px;}
	#reason ul li dl dd.txt { font-size: 24px;}
	#reason ul li dl dd.note{ font-size: 18px;}
}
@media (max-width: 481px) {
	#reason .inner-sct { padding: 40px 0;}
	#reason h2 { margin-bottom: 20px;}
	#reason ul li { margin-bottom: 20px;}
	#reason ul li dl { padding: 40px 18px 20px;}
	#reason ul li dl dt { top: -15px;}
	#reason ul li dl dd.txt { padding-top: 20px; font-size: 16px;}
	#reason ul li dl dd.note{ padding-left: 14px; font-size: 12px; text-indent: -12px;}
}


#flow .inner-sct { width: 92%; margin: 0 auto; padding: 70px 0;}
#flow h2 { margin-bottom: 30px; text-align: center;}
#flow h2 img { width: 72%; max-width: 700px;}
#flow ul li { position: relative; margin: 0 auto 30px;}
#flow ul li::after { content: ''; display: block; width: 100%; height: 48px; background: url('../img/arw.png') no-repeat 50% 50% / auto 100%;	}
#flow ul li:last-child::after { content: none;}
#flow ul li .icn { position: absolute; left: 0px; top: -50px; width: 180px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 10px #aaa;}
#flow ul li dl { width: 88%; max-width: 760px; background: #ffff; margin: 0 auto 30px; box-shadow: 0 0 15px #aaa;}
#flow ul li dd { padding: 40px 45px; font-size: 36px;}
#flow ul li dd img { display: block; width: 90%; margin: 0 auto 15px;}
@media (max-width: 901px) {
	#flow ul li dd { font-size: 24px;}
	#flow ul li dd span { margin: 0 auto 18px; font-size: 36px;}
}
@media (max-width: 801px) {
	#flow ul li .icn { width: 120px;}
}
@media (max-width: 641px) {
	#flow ul li::after { height: 30px;}
	#flow ul li dd { padding: 30px 25px; font-size: 21px;}
	#flow ul li dd span { font-size: 32px;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0;}
	#flow h2 { margin-bottom: 20px;}
	#flow ul li { margin: 0 auto 15px;}
	#flow ul li::after { height: 20px;}
	#flow ul li .icn { width: 70px; top: -20px;}
	#flow ul li dl { margin: 0 auto 18px;}
	#flow ul li dd { padding: 25px 18px; font-size: 16px;}
	#flow ul li dd span { margin: 0 auto 12px;  font-size: 21px;}
}


#about {}
#about .inner-sct { width: 92%; margin: 0 auto; padding: 80px 0 40px;}
#about h2 { margin-bottom: 30px; text-align: center;}
#about h2 img { width: 80%; max-width: 700px;}
#about .box { width: 100%; margin: 0 auto 10px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 15px #aaa;}
#about table { width: 100%; background: #fff;}
#about table tr { border-bottom: solid 2px #e3e3e3;}
#about table tr:last-child { border-bottom: none;}
#about table .grey { background: #efeded; border-left: solid 2px #e3e3e3;}
#about table .blue { background: #e4f4ff; border-left: solid 2px #e3e3e3;}
#about table .gold { background: #e6c982; font-size: 30px; text-align: center;}
#about table th,
#about table td { vertical-align: middle;}
#about table th { padding: 15px 0; font-size: 28px; font-weight: 700; line-height: 1.2; text-align: center;}
#about table th.col1 { width: 16%;}
#about table th.col2 { width: 26%;}
#about table th.col3 { width: 32%;}
#about table .blue span { display: block; color: #0f8ce0; text-align: center;
 background: -webkit-linear-gradient(#0f8ce0,#006cb5);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 
}
#about table td { font-weight: 700;}
#about table td.x,
#about table td.t,
#about table td.o { padding: 20px; font-size: 26px; border-left: solid 2px #e3e3e3; line-height: 1.4;}
#about table td.x { background: url('../img/icn-x.png') no-repeat 50% 50%;}
#about table td.t { background: url('../img/icn-t.png') no-repeat 50% 50%;}
#about table td.o { padding: 25px; background: url('../img/icn-o.png') no-repeat 50% 50%; color: #0e8ade; text-align: justify;}
#about p.note { font-size: 25px; font-weight: 700;}
@media (max-width: 901px) {
	#about table th { font-size: 24px;}
	#about table .gold { font-size: 24px;}
	#about table td.x,
	#about table td.t,
	#about table td.o { font-size: 21px;}
	#about p.note { font-size: 20px;}
}
@media (max-width: 641px) {
	#about table th { padding: 12px 0; font-size: 18px;}
	#about table .gold { font-size: 18px;}
	#about table td.x,
	#about table td.t,
	#about table td.o { font-size: 16px;}
	#about table td.o { padding: 20px 15px;}
	#about p.note { font-size: 16px;}
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 40px 0;}
	#about h2 { margin-bottom: 15px;}
	#about table th { padding: 12px 0; font-size: 12px;}
	#about table .gold { font-size: 12px;}
	#about table td.x,
	#about table td.t,
	#about table td.o { padding: 8px; font-size: 11px; background-size: 45% auto;}
	#about table td.o { padding: 10px 8px;}
	#about p.note { font-size: 13px;}
}


#guide { background: #1b3457;}
#guide .inner-sct { margin: 0 auto; padding: 100px 0;}
#guide h2 { margin-bottom: 60px; color: #fffe54; font-size: 52px; text-align: center;}
#guide ul { width: 88%; max-width: 800px; margin: 0 auto;}
#guide ul li { margin: 0 auto 40px;}
#guide ul li:last-child { margin: 0 auto;}
#guide ul li dl { border: solid 3px #fff;}
#guide ul li dl dt { padding: 20px 0; border-bottom: dashed 3px #fff; color: #fffe54; font-size: 50px; font-weight: 700; text-align: center;}
#guide ul li dl dd { width: 90%; margin: 0 auto; padding: 40px 0; color: #Fff; font-size: 30px; font-weight: 700;}
#guide ul li dl dd img { display: block; width: 85%; max-width: 550px; margin: 0 auto 30px;}
#guide ul li dl dd span.color{ color: #fffe54;}
#guide ul li dl dd span.note { display: block; font-size: 24px;}
@media (max-width: 901px) {
	#guide h2 { margin-bottom: 40px; font-size: 42px;}
	#guide ul li dl dt { font-size: 42px;}
	#guide ul li dl dd { font-size: 24px;}
}
@media (max-width: 641px) {
	#guide h2 { margin-bottom: 20px; font-size: 32px;}
	#guide ul li dl dt { padding: 12px 0; font-size: 26px;}
	#guide ul li dl dd { padding: 20px 0; font-size: 20px;}
	#guide ul li dl dd img { margin: 0 auto 20px;}
}
@media (max-width: 481px) {
	#guide .inner-sct { margin: 0 auto; padding: 50px 0;}
	#guide h2 { margin-bottom: 20px; font-size: 21px;}
	#guide ul li { margin: 0 auto 20px;}
	#guide ul li dl { border-width: 2px;}
	#guide ul li dl dt { border-width: 2px; font-size: 20px;}
	#guide ul li dl dd { padding: 15px 0; font-size: 15px;}
	#guide ul li dl dd img { margin: 0 auto 10px;}
	#guide ul li dl dd span.note { font-size: 13px;}
}


#point { background: url('../img/bg-point.jpg') no-repeat 50% 0% / 1000px auto;}
#point .inner-sct { width: 90%; margin: 0 auto; padding: 50px 0 80px;}
#point p.more { margin-bottom: 20px; text-align: center;}
#point p.more img { width: 80%; max-width: 700px;}
#point .box { width: 96%; margin: 0 auto; background: #fff; box-shadow: 0 0 15px #aaa;}
#point .box .tit { position: relative; padding: 30px; background: linear-gradient(#0f8ce0,#006cb5); cursor: pointer;}
#point .box .tit div { display: block; position: absolute; top: 50%; right: 20px; width: 72px; height: 72px; border: solid 3px #fff; border-radius: 50%; transform: translate(0%,-50%);}
#point .box .tit div::before,
#point .box .tit div::after { content: ''; display: block; width: 5px; height: 45px; background: #fff;
 position: absolute; top: 50%; left: 50%; transition: 0.4s linear;
}
#point .box .tit div::before{ transform: translate(-50%,-50%);}
#point .box .tit div::after { transform: translate(-50%,-50%) rotate(90deg);}
#point .box .tit.open div::before{ transform: translate(-50%,-50%) rotate(90deg);}
#point .box .tit p { color: #fff; font-size: 46px; font-weight: 700; line-height: 1;}
#point .box .tit p span { color: #fffe54;}
#point .box .ctn { display: none; padding: 10px 20px;}
#point .box .ctn ul li { padding: 20px 0; border-bottom: dashed 4px #d1d1d1;}
#point .box .ctn ul li:last-child { border-bottom: none;}
#point .box .ctn ul li dl { display: table; width: 100%;}
#point .box .ctn ul li dl dt,
#point .box .ctn ul li dl dd { display: table-cell; vertical-align: middle;}
#point .box .ctn ul li dl dt { width: 160px;}
#point .box .ctn ul li dl dt span { display: block; width: 100%; padding: 8px 0; background: linear-gradient(#e5c063,#ba8e30);
 color: #fff; font-size: 34px; font-weight: 700; line-height: 1.2; text-align: center;
}
#point .box .ctn ul li dl dd { width: auto; padding-left: 25px; font-size: 28px; font-weight: 700; line-height: 1.5;}
#point .box .ctn ul li dl dd span.color { color: #c3993b;}
#point .box .ctn ul li dl dd span.kakko { margin: 0 -6px;}
#point .box .ctn ul li dl dd span.sizeS { font-size: 21px;}
#point .box .ctn ul li dl dd span.sizeM { font-size: 26px;}
#point .box .ctn ul li dl dd span.sizeL { font-size: 34px;}
#point .box .ctn ul li dl dd span.sizeXL{ font-size: 38px;}


@media (max-width: 901px) {
	#point .box .tit div { right: 15px; width: 60px; height: 60px;}
	#point .box .tit div::before,
	#point .box .tit div::after { height: 36px;}

	#point .box .tit p { font-size: 34px;}
	#point .box .ctn ul li dl dt { width: 130px;}
	#point .box .ctn ul li dl dd { padding-left: 20px; font-size: 24px;}
	#point .box .ctn ul li dl dt span { font-size: 26px;}
	#point .box .ctn ul li dl dd span.sizeS { font-size: 18px;}
	#point .box .ctn ul li dl dd span.sizeM { font-size: 24px;}
	#point .box .ctn ul li dl dd span.sizeL { font-size: 28px;}
	#point .box .ctn ul li dl dd span.sizeXL{ font-size: 32px;}
}
@media (max-width: 801px) {
	#point .box .tit p { font-size: 30px;}
	#point .box .ctn ul li dl dt { width: 120px;}
	#point .box .ctn ul li dl dt span { padding: 5px 0;}
	#point .box .ctn ul li dl dd { font-size: 21px;}
	#point .box .ctn ul li dl dt span { font-size: 26px;}
	#point .box .ctn ul li dl dd span.sizeS { font-size: 16px;}
	#point .box .ctn ul li dl dd span.sizeM { font-size: 20px;}
	#point .box .ctn ul li dl dd span.sizeL { font-size: 24px;}
	#point .box .ctn ul li dl dd span.sizeXL{ font-size: 28px;}
}
@media (max-width: 641px) {
	#point .box .tit p { font-size: 28px;}
	#point .box .ctn ul li dl dt { width: 85px;}
	#point .box .ctn ul li dl dt span { font-size: 18px;}
	#point .box .ctn ul li dl dd { padding-left: 12px; font-size: 18px;}
	#point .box .ctn ul li dl dd span.sizeS { font-size: 14px;}
	#point .box .ctn ul li dl dd span.sizeM { font-size: 16px;}
	#point .box .ctn ul li dl dd span.sizeL { font-size: 18px;}
	#point .box .ctn ul li dl dd span.sizeXL{ font-size: 21px;}
}
@media (max-width: 481px) {
	#point { background-size: 600px auto;}
	#point .inner-sct { padding: 40px 0;}
	#point p.more { margin-bottom: 10px;}
	#point .box .tit { padding: 20px 15px;}
	#point .box .tit div{ right: 10px; width: 32px; height: 32px; border-width: 2px;}
	#point .box .tit div::before,
	#point .box .tit div::after { width: 2px; height: 20px;}
	#point .box .tit p { font-size: 17px;}
	#point .box .ctn { padding: 5px 12px;}
	#point .box .ctn ul li { padding: 8px 0; border-width: 2px;}
	#point .box .ctn ul li dl dt { width: 52px;}
	#point .box .ctn ul li dl dt span { font-size: 14px;}
	#point .box .ctn ul li dl dd { padding-left: 12px; font-size: 12px;}
	#point .box .ctn ul li dl dd span.sizeS { font-size: 10px;}
	#point .box .ctn ul li dl dd span.sizeM { font-size: 13px;}
	#point .box .ctn ul li dl dd span.sizeL { font-size: 13px;}
	#point .box .ctn ul li dl dd span.sizeXL{ font-size: 14px;}
	#point .box .ctn ul li dl dd span.sp-br { display: block;}
	#point .box .ctn ul li dl dd br.pc { display: none;}
}

#entry .inner-sct { width: 92%; margin: 0 auto; padding: 50px 0 80px;}
#entry h2 { margin-bottom: 50px; text-align: center;}
#entry h2 img { width: 45%; max-width: 430px;}
#entry .btn-line { width: 90%; max-width: 720px; margin:0 auto 50px;}
#entry .btn-line a { display: block; width: 100%; border-radius: 100px; box-shadow: 0 0 8px #999; overflow: hidden;}
#entry .btn-line a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	#entry .btn-line { margin:0 auto 40px;}
}


#fix-bnr { position: fixed; width: 100%; bottom: -400px; transition: 0.4s linear; z-index: 100;}
#fix-bnr.show { bottom: 0px;}
#fix-bnr .inner { width: 100%; max-width: 960px; margin: 0 auto; padding: 10px 0 30px; background: url('../img/bg-fixed.jpg') no-repeat 50% 50%;}
#fix-bnr p { text-align: center;}
#fix-bnr p img { width: 72%; max-width: 600px;}
#fix-bnr .btn { width: 100%; z-index: 2;}
#fix-bnr .btn a { position: relative; display: block; width: 80%; margin: 0 auto; background: #fff; border-radius: 100px; overflow: hidden; box-shadow: 0 0 12px #333; animation: 1.6s moving infinite;
}
#fix-bnr .btn a img { transition: 0.2s linear;}
#fix-bnr .btn a:hover img { opacity: 0.8;}
@media (max-width: 641px) {
	#fix-bnr .inner { padding: 6px 0 20px; background-size: 100% auto;}
}

#ft { width: 100%; max-width: 960px; margin: 0 auto; background: #c22513; padding-bottom: 230px;}
#ft .inner-ft { width: 92%; margin: 0 auto; padding: 50px 0;}
#ft ul.note { width: 100%; max-width: 700px; margin: 0 auto; color: #fff;}
#ft ul.note li { margin-bottom: 15px; font-size: 20px;}
#ft ul.note li:last-child { margin-bottom: 0;}
#ft .ft-Nav { padding: 40px 0; background: #a61f10;}
#ft .ft-Nav ul { margin-bottom: 15px; font-size: 0; text-align: center;}
#ft .ft-Nav ul li { display: inline-block; padding: 0 15px; font-size: 16px;}
#ft .ft-Nav ul li a { color: #fff;}
#ft .ft-Nav ul li a:hover { text-decoration: none;}
#ft .ft-Nav p { color: #fff; font-size: 14px; text-align: center;}
@media (max-width: 901px) {
}
@media (max-width: 641px) {
	#ft { padding-bottom: 172px;}
	#ft ul.note li { font-size: 14px;}
}
@media (max-width: 481px) {
	#ft { padding-bottom: 120px;}
	#ft .inner-ft { padding: 30px 0;}
	#ft ul.note li { font-size: 11px;}
	#ft .ft-Nav ul li { width: 50%; padding: 0; font-size: 12px;}
	#ft .ft-Nav { padding: 30px 0;}
	#ft .ft-Nav p { font-size: 12px;}
}


.formContact { margin: 0px auto 35px;}

.formContact .formRow {
	display: flex;
	border-top: 1px solid #898989;
}

.formContact .formRow:last-child {
	border-bottom: 1px solid #898989;
}

.formContact .formRowTitle {
	width: 29.375%;
	min-height: 58px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2px 0 12px;
	box-sizing: border-box;
	background-color: #F1F8FD;
	border-left: 1px solid #898989;
	border-right: 1px solid #898989;
}

.formContact .formRowTitle p {
	color: #000;
	font-size: 1.9rem;
	font-weight: 900;
}

.formContact .formRowTitle .redLbl{
	color: #FFF;
	font-size: 1.7rem;
	font-weight: 900;
	background-color: #ED1C24;
	padding: 10px 6px;
}

.formContact .formRowTitle .greenLbl{
	color: #FFF;
	font-size: 1.7rem;
	font-weight: 900;
	background-color: #8CC63F;
	padding: 10px 6px;
}

.formContact .formRowInput {
	width: 70.625%;
	min-height: 58px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 18px;
	box-sizing: border-box;
	border-right: 1px solid #999899;
}

.formContact .formRowInput .nSize {
	width: 64.7%;
	height: 34px;
	font-size: 1.762rem;
	padding-left: 20px;
}

.formContact .formRowInput input {
	border: 1px solid #999899;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0;
}

.formContact .formRowInput input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #CCCCCC;
	opacity: 1; /* Firefox */
}

.formContact .formRowInput input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #CCCCCC;
}

.formContact .formRowInput input::-ms-input-placeholder { /* Microsoft Edge */
	color: #CCCCCC;
}

.formContact select {
	border: 1px solid #999899;
	color: #cccccc;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0;
	background: #fff;
}

.formContact select option {
	color: #1A1A1A;
}

.formContact .selectNSize {
	position: relative;
	max-width: 100%;
	width: 374px;
}

.formContact .smallSize {
	display: flex;
    width: 166px;
    justify-content: space-between;
}

.formContact .selectNSize:after {
	content: '';
	position: absolute;
	width: 16.5px;
	height: 14.3px;
	background-image: url('../img/select_arrow.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	right: 8px;
	top: 50%;
	transform: translate(0, -50%);
}

.formContact .selectNSize select {
	font-size: 1.762rem;
	width: 100%;
	height: 38px;
	padding-left: 15px;
}

.formContact .smallSize select {
	width: 78px;
}

.formContact .smallSize:after {
	display: none;
}

.formContact .selectNSize .colSmallSize {
	position: relative;
}

.formContact .selectNSize .colSmallSize:after {
	content: '';
	position: absolute;
	width: 16.5px;
	height: 14.3px;
	background-image: url('../img/select_arrow.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	right: 8px;
	top: 50%;
	transform: translate(0, -50%);
}

.rowTextarea .formRowInput {
	padding: 12px 20px;
}

.rowTextarea .formRowTitle {
	padding-bottom: 10%;
}

.formContactTextarea {
	height: 155px;
	width: 100%;
	resize: none;
	font-size: 1.762rem;
	padding: 15px;
	border: 1px solid #999899;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	border-radius: 0;
}

.formContactTextarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #CCCCCC;
	opacity: 1; /* Firefox */
}

.formContactTextarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #CCCCCC;
}

.formContactTextarea::-ms-input-placeholder { /* Microsoft Edge */
	color: #CCCCCC;
}

.formCheckBox {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 5px;
}

.formCheckBox p {
	color: #000;
	font-weight: bold;
	font-size: 2.2rem;
}

.formCheckBox input {
	width: 32px;
	height: 28px;
	border: 1px solid #AEAEAE;
	margin-right: 10px;
}

.formDes {
	width: 709px;
	max-width: 100%;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 15px 20px 20px 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	overflow-y: scroll;
	height: 200px;	
}

.formDes p {
	color: #000;
	text-align: justify;
	font-size: 1.6rem;
	line-height: 1.9;
}

.selectOnSp {
	width: 68.7%;
}

.selectOnSp .collapse.active:before {
	-webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    /*color: #9DC3E6;*/
    color: #0071B7;
}

.selectOnSp .btnCity.active:before {
	color: #9DC3E6;
}

.selectShop .btnArea {
	margin-top: 10px;
}
.btnArea {
	font-weight: normal;
	padding: 15px;
	font-size: 1.6rem;
	border: 1px solid #ccc;
	color: #000;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}

.btnFormContact {
	padding-bottom: 35px;
	width: 100%;
	text-align: center;
}

.btnFormContact button {
	width: 269px;
	height: 75px;
	background-color: #DF803C;
	color: #FFF;
	font-weight: 900;
	font-size: 2.783rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 35px;
	border: 1px solid #DF803C;
	margin: 0 auto;
	-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.75);
	outline: none;
	cursor: pointer;
}

/*[custom checkbox]*/
.custom-checkbox {
	text-align: center;
	margin-bottom: 10px;
}

.custom-checkbox label{
	/*margin: 0 15px 0 0;*/
}
.custom-checkbox input[type="checkbox"]{
	display: none;
}
.custom-checkbox .vir-label{
	cursor: pointer;
    padding-bottom: 16px;
    display: inline-block;
}

.custom-checkbox:last-child .vir-label{
    padding-bottom: 6px;
}

.custom-checkbox .vir-content{
    vertical-align: middle;
    margin-left: 9px;
	color: #000;
    font-weight: bold;
    font-size: 2.2rem;
}
.custom-checkbox .vir-checkbox{
	width: 32px;
    height: 28.8px;
	border: 1px solid #aeaeae;
	background: #ffffff;
	vertical-align: middle;
	position: relative;
	display: inline-block;
}

.custom-checkbox input[type="checkbox"]:checked + .vir-label .vir-checkbox:before{
    content: "";
    background: #a3a3a3;
    border-radius: 50px;
    height: 20.8px;
    width: 24px;
    position: absolute;
    display: inline-block;
    top: 4px;
    left: 4px;
}

.custom-checkbox .vir-checkbox.square-style,
.custom-checkbox input[type="checkbox"]:checked + .vir-label .vir-checkbox.square-style:before{
	border-radius: 0px;
}

.btnArea.active {
	margin-bottom: 0;
}

.selectOnSp .collapseContent {
	padding: 5px;
    border: 1px solid #ccc;
    border-top: none;
    margin-bottom: 10px;
    display: none;
}

.btnArea:before {
    content: "▼ ";
    color: #0071B7;
    /*color: #9DC3E6;*/
    display: inline-block;
    -webkit-transition: all 0.1s;
	transition: all 0.1s;
	padding-right: 5px;
	-webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.btnCity {
	font-weight: normal;
	padding: 15px;
	font-size: 1.6rem;
	border: 1px solid #ccc;
	color: #000;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
}

.btnCity.active {
	margin-bottom: 0;
}

.btnCity:before {
    content: "▼ ";
    /*color: #0071B7;*/
    color: #9DC3E6;
    display: inline-block;
    -webkit-transition: all 0.1s;
	transition: all 0.1s;
	padding-right: 5px;
	-webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.selectOnSp .collapseContent label {
	display: flex;
	align-items: center;
	font-size: 1.6rem;
	padding: 10px 0 10px 20px;
}

.formContact .formRowInput input[type=radio] {
    background-color: initial;
    cursor: default;
    appearance: radio;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    box-sizing: border-box;
    padding: initial;
    border: initial;
    font-size: 1.6rem;
    border-radius: 50%;
}

.customerFeedbackList .showSp img {
	margin-bottom: 35px;
}

.customerFeedbackList .showSp img:last-child {
	margin-bottom: 0px;
}

#errors {
    outline: none;
    margin: 0 auto 20px auto;
    text-align: center;
    position: relative;
    color: #ff0000;
    font-weight: 400;
    font-size: 2.445rem;
}
@media only screen and (max-width: 480px){
	.formContact .formRowInput,
	.formContact .formRowTitle,
	.formContact .formRow {
		border: none;
	}

	.formContact .formRow {
		flex-wrap: wrap;
		margin-bottom: 45px;
	}

	.formContact .formRowTitle,
	.formContact .formRowInput {
		width: 100%;
	    min-height: unset;
	}

	.formContact .formRowTitle {
		padding: 0;
	    justify-content: flex-start;
	    margin-bottom: 5px;
	    background: #fff;
	}

	.formContact .formRowInput {
		padding: 0;
	}

	.formContact .formRowTitle p {
		order: 2;
		font-size: 1.38rem;
	}

	.formContact .formRowTitle .redLbl,
	.formContact .formRowTitle .greenLbl {
		order: 1;
		margin-right: 7px;
		padding: 2.5px 5px;
		font-size: 1.6rem;
	}

	.formContact .formRowInput .nSize {
		font-size: 1.6rem;
		padding-left: 8px;
		height: 48px;
		width: 100%;
	}

	.formContact .selectNSize select {
		height: 52px;
		padding-left: 8px;
		font-size: 1.6rem;
	}

	.formContact .selectNSize {
		width: 170px;
	}

	.formContact .maxSizeSp {
		width: 100%;
	}

	.formContact .smallSize {
		width: 208px;
	}

	.formContact .smallSize select {
		width: 97px;
		padding: 0;
		padding-right: 9%;
		padding-left: 30%;
	}

	.formContact .selectNSize:after,
	.formContact .selectNSize .colSmallSize:after {
		width: 13px;
		height: 11px;
	}

	.formContactTextarea {
		font-size: 1.6rem;
		height: 200px;
		padding: 10px;
		box-sizing: border-box;
		border-bottom: none;
	}

	.formCheckBox p {
		font-size: 1.38rem;
	}

	.formCheckBox {
		justify-content: flex-start;
		padding: 0 25px;
		margin-bottom: 3px;
	}

	.formCheckBox input {
		width: 24px;
		height: 22px;
		border: 2px solid #AEAEAE;
	}

	.formDes {
		width: calc(100% - 44px);
		padding: 15px 10px 15px 10px;
		box-sizing: border-box;
		margin-bottom: 20px;
		height: 150px;
	}

	.formDes p {
		font-size: 1.245rem;
		line-height: 1.7;
	}

	.btnFormContact {
		padding-bottom: 25px;
	}

	.btnFormContact button {
		width: 165px;
		height: 46px;
		font-size: 1.7rem;
		border-radius: 17.5px;
		margin-top: 20px;
	}

	.custom-checkbox .vir-checkbox {
		width: 25px;
		height: 22px;
	}

	.custom-checkbox .vir-content {
		font-size: 1.1225rem;
		margin-left: 4px;
	}

	.custom-checkbox {
		text-align: center;
		padding: 0 22px;
	}

	.custom-checkbox input[type="checkbox"]:checked + .vir-label .vir-checkbox:before {
	    height: 16px;
	    width: 19px;
	    top: 3px;
	    left: 3px;
	}

	.custom-checkbox .vir-label {
		padding-bottom: 0;
	}


}
@media only screen and (max-width: 320px){


}

/* line */
.p-reservations_line {
	background-color: #00c300;
	padding: 5px 10px;
/* 	width: calc(80% - 50px); */
	margin: -30px auto 40px;
	width: 80%;
	max-width: 720px;
	display: none;
}

.btn-line {
	display: none;
}
.l-footer_line{
    display: block;
    text-align: center;
    width: 224px;
    margin: 15px auto 30px;
    background-color: #00c300;
}
.l-footer_line img{
    width: 224px;
    vertical-align: middle;
}
footer  a.l-footer_line:hover{
	opacity: 0.8;
}
@media only screen and (max-width: 641px) {
	.p-reservations_line,
	.btn-line {
    display: block;
	}

	.l-footer_line{
    display: none;
	}
}