@charset "utf-8";
/* CSS Document */

#slimmenu{ display:none;}
#navArea{ display:none;}
.pcno { display:none;}
img { max-width:100%;}
#navArea{ display:none;}
/*▼ 初期化 ▼*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, ul, li, blockquote, th, td, tr, img { padding:0px; margin:0px; font-size:16px; line-height:1.5em; letter-spacing:1px; color:#333;-webkit-text-size-adjust:100%; font-weight:400;font-family: 'Noto Serif KR', serif;}
table { border-collapse:collapse; }
ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6, .more{ padding:0px; margin:0px; font-size:100%; font-weight:normal;}
a { overflow:hidden; outline:none; }
img { border:none; vertical-align:bottom; }
table td { border:none; vertical-align:top; }
.text99 { text-indent:-9999px; }
a{-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
a:hover { text-decoration:none; }
a:hover { opacity:0.5; filter:alpha(opacity=50);-webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; transition:0.5s; }
.kadomaru{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/*▲ 初期化 ▲*/
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}


/*▼エリア・背景設定▼*/
body{ min-width:1100px;}
#body-top{ overflow:hidden;}



h1{ text-indent:-9999px; height:0;}

/*▼ヘッダー▼*/
#header{ max-width:1300px; margin:auto;}
#header #hmid{ overflow:hidden; padding:20px 20px;}
#header .left { width:380px; float:left; position:relative; padding-top:12px;}
#header .left a{ display:inline-block; text-decoration:none;}
#header .left .p-01{}
#header .left .p-01 select{ background:#fff; font-size:15px; font-weight:bold; color:#333; letter-spacing:normal; display:inline-block; border:1px solid #333; padding:5px 20px; position:absolute; right:0; bottom:5px;}


#header .right{ width:300px; float:right; text-align:center;font-family: 'Noto Sans KR', sans-serif;}
#header .right a{ font-size:22px; font-weight:bold; color:#fff; line-height:55px; background:linear-gradient(to bottom, #84dcf3,#4780cd);border-radius:5px; display:block; text-decoration:none; border:3px solid #45d3f0;background: transparent; border-radius: 5px; overflow: hidden; position:relative;}
/* ::before, ::afterで2種類のグラデーションを用意 */
#header .right a::before,
#header .right a::after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
/* グラデーション1 */
#header .right a::before { transition: all 0.6s; /* アニメーション実行時間 */ z-index: -1; background: linear-gradient(to top, #2f559b 0%, #57b8e6 100%);}
/* グラデーション2 */
#header .right a::after { z-index: -2; background: linear-gradient(to top, #4780cd 0%, #81dcf3 100%);}
/* ホバー時にグラデーション1を透明にする */
#header .right a:hover::before { opacity: 0;}
/* ホバー時の透明度を下げない */
#header .right a:hover{ opacity:1;}



/*▼メインビジュアル▼*/
#hmp{ margin-bottom:50px;}



/*▼フッター▼*/
#footer { text-align:center;}
#footer #fmid{ display:inline-block; padding:50px 0 50px;}
#footer #fname{ display:inline-block; margin-bottom:20px; }
#footer .btn{ width:330px; margin:auto;}
#footer .btn a{ background:#369bdc; font-weight:bold; color:#fff; line-height:50px; border-radius:10px; display:block; text-decoration:none;}


#footer #tamonten { clear:both; text-align:center; font-size:10px; padding:10px 0; border-top:1px solid #d2d2d2; text-align:right;}
#footer #tamonten a { display:block; cursor:default; color:#777676; text-decoration:none; opacity:1; filter:alpha(opacity=100);}


.page-top {
	position:fixed;
    bottom:70px;
    right:60px;
	background-image:url(../images/common/totop.png);
	width:50px; height:50px; text-indent:-9999px;
    -ms-filter:"alpha(opacity=80)";
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    opacity:0.8;
	-webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; transition:0s;}




/*▼エリア・共通設定▼*/
.box{ width:1024px; margin:auto; padding:70px 0;}
.bk-white{ background:#f6f9f8; padding-top:50px;}



.h2-01{ font-size:48px; font-weight:600; text-align:center; margin-bottom:50px;}
.h2-01 span{ background-image:url(../images/common/h2-img.png), url(../images/common/h2-img.png); background-position:left 10px, right 10px; background-repeat:no-repeat; display: inline-block; background: linear-gradient(to bottom, #2ea7e0, #2f357e); background: -webkit-linear-gradient(to bottom, #2ea7e0, #2f357e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.h2-01 img{ vertical-align:middle; margin:0 15px;}


.h2-02{ background:#f9f9f9 url(../images/common/h2-ribbon.png); background-position:right top; background-repeat:no-repeat; font-size:36px; font-weight:bold; color:#203094; line-height:150px; text-align:center; border-radius:15px; position:relative; margin-bottom:70px;}
.h2-02 img{ vertical-align:middle; margin-right:20px;}
.h2-02:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -25px; border:25px solid transparent; border-top: 25px solid #f9f9f9;}

.h3-01{ background:#cfecf2; font-size:32px; font-weight:600; color:#186673; text-align:center; padding:15px 0; margin-bottom:50px;}



.more{ width:900px; text-align:center; margin:50px auto;}
.more a{ background:linear-gradient(to bottom,#58b9e6, #2f559b); font-size:32px; font-weight:bold; color:#fff; padding:30px 0; border-radius:5px; display:block; text-decoration:none; position:relative;}







/*▼▼▼ホーム　home▼▼▼*/
#home .bk-01{ background:url(../images/home/bk-01.jpg) center top no-repeat;}
#home .bk-02{ background:url(../images/home/bk-02.jpg) center top no-repeat; padding-top:50px;}
#home .bk-03{ background:url(../images/home/bk-03.jpg) center top no-repeat;}
#home .bk-04{ background:url(../images/home/bk-04.jpg) center top no-repeat; height:350px;}

#home #box-01{ padding:80px 0 100px;}
#home #box-01 h3{ background:url(../images/common/h3-bottom.png) center bottom no-repeat; width:800px; text-align:center; margin:0 auto 50px; padding-bottom:40px;}
#home #box-01 h3 img { filter: drop-shadow(0px 0px 10px #fff); vertical-align:middle; margin-right:10px;}
#home #box-01 h3 span{ font-size:36px; font-weight:bold; display:inline-block; text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff; vertical-align:middle;}
#home #box-01 .area-01{ overflow:hidden; margin-bottom:70px;}
#home #box-01 .area-01 .img{ float:right;}
#home #box-01 .area-01 .left{ width:600px; float:left;}
#home #box-01 .area-01 .left h4{ background:radial-gradient(#5fd3f5, #23bfe8); line-height:80px; font-size:32px; font-weight:bold; color:#fff; text-align:center; margin-bottom:30px;}
#home #box-01 .area-01 .left p { line-height:2em; text-align:center; margin-bottom:50px;}

#home #box-01 .area-01 .left .entry{ overflow:hidden; height:100px; margin-bottom:30px;}
#home #box-01 .area-01 .left .entry .point{ float:left;}
#home #box-01 .area-01 .left .entry .text{ float:right; width:493px; height:100px; border-bottom:2px solid #2f5ea3; box-sizing:border-box;}
#home #box-01 .area-01 .left .entry .text a{ display:block; font-size:30px; font-weight:700; color:#203094; padding:35px 0 35px 15px; position:relative; text-decoration:none; transition:.3s;}
#home #box-01 .area-01 .left .entry:first-of-type .text a{ line-height:1.3em; padding-top:10px;}
/*ボタンの丸囲三角*/
#home #box-01 .area-01 .left .entry .text a span{ display: inline-block;vertical-align: middle;color: #fff;line-height: 1;position:absolute;width: 1.1em;height: 1.1em;border: 0.1em solid currentColor;background: currentColor;border-radius: 50%; border:2px solid #203094; box-sizing: content-box; right:25px; top:35%; transition:.3s;}
#home #box-01 .area-01 .left .entry .text a span::before {content: '';color: #203094; width: 0;height: 0;border-style: solid;border-color: transparent;border-width: 0.25em 0.35em;border-left-color: currentColor;border-right: 0;transform: translateX(15%);position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; transition:.3s;}
/*ホバーした時に色変更*/
#home #box-01 .area-01 .left .entry .text a:hover{ opacity:1; text-decoration:underline; transition:.3s;}
#home #box-01 .area-01 .left .entry .text a:hover span{ background:#203094;}
#home #box-01 .area-01 .left .entry .text a:hover span::before { color: #fff;}


/*お問い合わせバナー*/
#bnr-contact-02{ margin:100px auto 100px;}
.bnr-contact{ background:url(../images/common/bnr-bk.jpg) center top no-repeat; height:250px; padding:15px; box-sizing:border-box; position:relative; width:1024px; margin:0 auto 50px;}
.bnr-contact .area-01{ border:2px solid rgba(217,254,254,.5); height:220px; box-sizing:border-box; text-align:center;}
.bnr-contact .area-01 .p-01{ width:600px; background:#ed3992; font-size:20px; font-weight:bold; color:#fff; line-height:50px; position:relative; margin:20px auto 25px;font-family: 'Noto Sans KR', sans-serif;}
.bnr-contact .area-01 .p-01:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #ed3992;}

.bnr-contact .area-01 .btn{ width:950px; text-align:center; margin:0 auto 50px;}
.bnr-contact .area-01 .btn a{ font-size:36px; font-weight:bold; color:#fff; line-height:100px; background:linear-gradient(to bottom, #6fd7e6,#29aab8);border-radius:10px; display:block; text-decoration:none; border:4px solid #38cde0;font-family: 'Noto Serif KR', serif;}

/*
.bnr-contact .area-01 .btn a{ font-size:36px; font-weight:bold; color:#fff; line-height:100px; background:linear-gradient(to bottom, #6fd7e6,#29aab8);border-radius:10px; display:block; text-decoration:none; border:3px solid #38cde0;}
*/



#home #box-02{ margin-bottom:100px;}
#home #box-02 .area-01{ overflow:hidden; margin-bottom:70px;}
#home #box-02 .area-01 .t-box{ width:600px; float:left; text-align:center;}
#home #box-02 .area-01 img{ float:right;}
#home #box-02 .area-02{ text-align:center; margin-bottom:70px;}
#home #box-02 .area-02 .inner{ padding-top:30px; overflow:hidden;}
#home #box-02 .area-02 .inner .entry{ width:500px; float:left;}
#home #box-02 .area-02 .inner .entry:last-child{ float:right;}
#home #box-02 .area-02 .inner .entry p{ text-align:center; padding-top:20px;}
#home #box-02 .area-03{ overflow:hidden;}
#home #box-02 .area-03 .entry{ background:#fff; width:300px; float:left; margin-right:62px;}
#home #box-02 .area-03 .entry:last-child{ margin-right:0px;}
#home #box-02 .area-03 .entry .inner{ padding:35px 20px;}
#home #box-02 .area-03 .entry .inner h4{ font-size:24px; font-weight:bold; color:#203094; text-align:center; margin-bottom:15px;}
#home #box-02 .area-03 .entry .inner p{ line-height:1.8em;}


#home #box-03{ margin-bottom:120px;}
#home #box-03 .area-01{ overflow:hidden; margin-bottom:70px;}
#home #box-03 .area-01 .img-01{margin-bottom:50px;}
#home #box-03 .area-01 .arrow{ margin:30px 0 15px;}
#home #box-03 .area-01 .p-01 { color:#fff; text-align:center;}
#home #box-03 .area-01 .entry{ background:#fff; width:200px; float:left; text-align:center; margin-right:6px;}
#home #box-03 .area-01 .entry:last-child{ margin-right:0px;}
#home #box-03 .area-01 .entry .p-title{ background:#ed3992; color:#fff; line-height:25px;}

#home #box-03 .area-01 .entry .inner{ padding:15px 0; display:table; width:100%;}
#home #box-03 .area-01 .entry .inner p{ display:table-cell; vertical-align:middle; text-align:center;}
#home #box-03 .area-02{ overflow:hidden;}
#home #box-03 .area-02 .entry{ background:#fff; width:500px; float:left}
#home #box-03 .area-02 .entry:last-child{ float:right;}
#home #box-03 .area-02 .entry .inner{ padding:35px 20px;}
#home #box-03 .area-02 .entry .inner h4{ font-size:24px; font-weight:bold; color:#203094; text-align:center; margin-bottom:15px;}
#home #box-03 .area-02 .entry .inner p{ line-height:1.8em;}


#home #box-04{ padding-bottom:0px;}
#home #box-04 .p-01{ text-align:center;}
#home #box-04 .area-01{ overflow:hidden; text-align:center;}
#home #box-04 .area-01 .entry{text-align:center;}
#home #box-04 .area-01 .p-02{}



#home #box-05{ padding:100px 0; width:980px;}
#home #box-05 h2{ margin-bottom:10px;}
#home #box-05 .p-h2{ font-size:18px; text-align:center; margin-bottom:50px;}
#home #box-05 .area-01{ height:551.25px; margin-bottom:50px;}
#home #box-05 .p-01{ font-size:13px; color:#999; letter-spacing:normal; text-align:right; padding-top:10px;}
#home #box-05 .area-02{ margin-bottom:50px;}
#home #box-05 .area-03{ overflow:hidden;}
#home #box-05 .area-03 .entry{ width:480px; float:left;}
#home #box-05 .area-03 .entry:last-child{ float:right;}



#home #box-06{ padding:100px 0;}
#home #box-06 .qa-list:not(:first-child) { margin-top:20px;}
#home #box-06 .qa-list .question{ background:linear-gradient(to bottom,#1fa6c6, #2ab6d1); font-size:24px; font-weight:600; color:#fff; padding:20px 0 20px 100px; position:relative; cursor: pointer;}
#home #box-06 .qa-list .question:before{ position: absolute; display: block; content: 'Q.'; top: 15px; left:40px; color: #fff; font-size: 36px;}
#home #box-06 .qa-list .question:after { position: absolute; display: block; content: '';  top: 35%; right: 22px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); transition: all .3s ease-in-out;}

#home #box-06 .qa-list .question.open:after { transform: rotate(-45deg); top: 45%;}

#home #box-06 .qa-list .answer { background:#ddf1f5; padding:30px 20px 30px 100px; display:none; position: relative;}
#home #box-06 .qa-list .answer:before { position: absolute; display: block; content: 'A.'; top: 27px; left: 40px; color: #ed3992; font-size: 36px;}




#home #box-contact .area-01 .area-mailform{ background:#fff; padding:50px; border-radius:20px;}
#home #box-contact .area-01 .area-mailform table{ width:100%; margin-bottom:50px;}
#home #box-contact .area-01 .area-mailform table tr{}
#home #box-contact .area-01 .area-mailform table td{ background:#fff; padding:20px 8px; vertical-align:middle;}
#home #box-contact .area-01 .area-mailform table td.td-01{ width:200px; font-weight:bold; padding-left:20px;}
#home #box-contact .area-01 .area-mailform table tr:last-child td{ border-bottom:1px solid #ccc;}
#home #box-contact .area-01 .area-mailform table ul li{ margin-bottom:7px;}
#home #box-contact .area-01 .area-mailform table ul li:last-of-type{ margin-bottom:0px;}
#home #box-contact .area-01 .area-mailform table ul.ul-01 li{ margin-bottom:0px;}
#home #box-contact .area-01 .area-mailform table select{ padding:3px; font-size:15px;}
#home #box-contact .area-01 .area-mailform table input{ padding:3px; font-size:15px;}
#home #box-contact .area-01 .area-mailform table label img{ display:block; margin:0 auto 3px;}
#home #box-contact .area-01 .area-mailform table button{}
#home #box-contact .area-01 .area-mailform .chui{ font-weight:bold; color: #fff; background:#b90006; font-size:11px; padding:0px 7px; margin-right:7px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius:0px; position:relative; bottom:3px; float:right;position:relative; top:0px; font-family: 'M PLUS 1 Code', sans-serif;}


#home #box-contact .area-01 .area-mailform .chui-01{ float:left;}
#home #box-contact .area-01 .area-mailform .p-01{ margin-top:5px;}
#home #box-contact .area-01 .area-mailform .autotext{ margin-bottom:30px;}
#home #box-contact .area-01 .area-mailform .p-02{ font-weight:bold;}
#home #box-contact .area-01 .area-mailform .p-min{ font-size:14px; letter-spacing:normal; padding-top:5px;}
#home #box-contact .area-01 .area-mailform .w01{width:99%;}
#home #box-contact .area-01 .area-mailform .w02{width:40%;}

#home #box-contact .area-01 .area-mailform .kakunin{ background:#F0F7FC; overflow:hidden; padding:5px 5px;margin-bottom:20px; text-align:center;}
#home #box-contact .area-01 .area-mailform .tb-01{}
#home #box-contact .area-01 .area-mailform .tb-03{ text-align:center; position:relative; left:-30px;}
#home #box-contact .area-01 .area-mailform .tb-03 .chui{ float:none;}
#home #box-contact .area-01 .area-mailform .tb-02{ text-align:center;}
#home #box-contact .area-01 .area-mailform .tb-04{ height:200px;overflow-y:scroll;padding:20px; border:#999 solid 1px; background:#FFF; margin:auto; margin-bottom:50px; }
#home #box-contact .area-01 .area-mailform .btn{ background:linear-gradient(to bottom,#58b9e6, #2f559b); font-size:20px; font-weight:bold; color:#fff; padding:20px 0; border-radius:5px; display:block; text-decoration:none; position:relative; border:none; margin:auto; width:400px; font-size:18px; font-weight:bold; border:3px solid #2ea7e0;}
#home #box-contact .area-01 .area-mailform .btn:hover{opacity: 0.5; filter: alpha(opacity=50);-webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;cursor: pointer;}
#home #box-contact .area-01 .area-mailform .p-03{ font-weight:bold; margin-bottom:10px;}
#home #box-contact .area-01 .area-mailform .p-04{ font-weight:bold;}
#home #box-contact .area-01 .area-mailform .p-05{margin-bottom:15px;}
#home #box-contact .area-01 .area-mailform .ul-01{margin-bottom:15px;}

#home #box-contact .area-01 .area-mailform .tb-04 p{}



#home #box-cace .area-01{ text-align:center;}
#home #box-cace .area-01 .entry{ margin-bottom:50px; display: inline-block;}
#home #box-cace .area-01 .title{background:#cfecf2; font-size:32px; font-weight:600; color:#186673; text-align:center; padding:15px 0; }


#home #box-mpc h2{ margin-bottom:10px;}



#home #box-mpc h3{ font-size:22px; margin-bottom:10px;}
#home #box-mpc h3 span{ font-weight:bold; font-size:27px;}
#home #box-mpc .p-h2{font-size:30px;font-weight:bold; color:#203094; text-align:center; font-family: 'Zen Old Mincho', serif; margin-bottom:50px;}
#home #box-mpc .area-01{ text-align:center;}
#home #box-mpc .area-02{ text-align:center; overflow:hidden;}

#home #box-mpc .area-02 .left{ width:48%; float:left;}
#home #box-mpc .area-02 .right{ width:48%; float:right; padding-top:20px;}
#home #box-mpc .area-02 .p-02{ margin-bottom:20px; clear:both;}

#home #box-mpc .area-02 ul{ display:inline-block; text-align:left; margin-bottom:20px; margin-top:30px;}
#home #box-mpc .area-02 ul.list-design { border: 2px solid #99bdde; border-radius: 10px; list-style: none; padding: 0 .8em .5em; position: relative; }
#home #box-mpc .area-02 ul.list-design li { border-bottom: 1px dashed #b9b9b9; margin-top: 10px; padding: .5em 0 .5em 2em; font-size:20px;}
#home #box-mpc .area-02 ul.list-design li:before { color: #99bdde; content: "\f138"; font-family: "Font Awesome 5 Free"; font-weight: 900; left : 1em; margin: 3px 0; position: absolute; }
#home #box-mpc .area-02 ul.list-design li:last-of-type { border-bottom: none; }




.c-marker { background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%); background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%); background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%); background-repeat: no-repeat; background-size: 200% .8em; background-position: 100% .5em; transition: 2s; }
.c-marker.is-active { background-position: 0% .5em;


form.text { width: 100%; height: 100%; padding-bottom: 75px; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(at top, #b5e6cf, #9dddad); }
.select { width: 225px; height: 40px; cursor: pointer; background-color: white; box-shadow: 0 2px 0 white; border-radius: 2px; &_expand {
 width: 0;
 height: 40px;
 position: absolute;
 top: 0;
 right: 0;
 &::after {
 content: '\003E';
 position: absolute;
 top: 50%;
 right: 0;
 transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
 color: #3e3e3e;
 font-size: 28px;
 pointer-events: none;
 z-index: 2;
 transition: all 250ms cubic-bezier(.4, .25, .3, 1);
 opacity: .6;
}
 &:hover::after {
opacity: 1
}
 &:checked::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
}
}
 &_expandLabel {
 display: block;
 width: 100%;
 height: 40px;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
}
 &_close {
display: none
}
 &_closeLabel {
 width: 100vw;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 display: none;
}
 &_items {
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 border: 2px solid #2fb5d1;
 border-radius: 2px;
 padding-top: 40px;
}
 &_input {
display: none
}
 &_label {
 transition: all 250ms cubic-bezier(.4, .25, .3, 1);
 display: block;
 height: 0;
 font-size: 1.2rem;
 line-height: 40px;
 overflow: hidden;
 color: #3e3e3e;
 background-color: #fff;
 cursor: pointer;
 padding-left: 20px;
 &-placeholder {
 height: 40px;
 vertical-align: middle;
 position: absolute;
 top: 0;
 left: 0;
 opacity: .6;
 background-color: transparent;
}
}
 &_expand:checked {
 + .select_closeLabel {
 display: block;
 + .select_options {
 .select_label {
 height: 40px;
 &:hover {
background-color: #f7f7f7
}
}
 + .select_expandLabel {
display: none
}
}
}
}
 &_input:checked + .select_label {
 height: 40px;
 margin-top: -40px;
}
}