@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-weight:normal;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ -webkit-overflow-scrolling: touch; width: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 180px;}
body{
    min-width: 1000px;
    background: #fff;
    color: #231815;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 1.4rem;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}
body.active{ overflow-y: hidden;}
img{ max-width: 100%; vertical-align: bottom;}
video{ max-width: 100%; vertical-align: bottom;}
a{ color: #231815; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}
.aligncenter{ display: block; margin: 0 auto;}

@media screen and (max-width: 768px){
    html{ scroll-padding-top: 14.666vw;}
    body{ min-width: 0; font-size: 3.2vw;}
    .pc{ display: none;}
    .sp{ display: block;}
    #wrap{ overflow: hidden; width: 100%;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; left: 0; z-index: 20; display: flex; padding: 0 0 15px; width: 100%; height: 180px; background: #fff; transition: transform .4s ease; transform: translate(0,0); flex-wrap: wrap; justify-content: space-between;}
.head-animation { transform: translate(0,-150%);}
.header h1{ display: flex; padding: 15px 0 0 18px; align-items: flex-end;}
.header h1 a{ display: block; width: auto; height: 60px;}
.header h1 a img{ width: auto; height: 100%;}
.header h1 span{ margin: 0 0 0 .5em; font-size: 1.4rem;}
.header .switch{ display: none;}

@media screen and (max-width: 768px){
    .header{ padding: 1em 4vw; height: 14.666vw; border-bottom: 1px solid #dcdddd; align-items: center;}
    .header h1{ padding: 0;}
    .header h1 a{ height: calc(14.666vw - 2em);}
    .header h1 span{ margin: 0 0 0 .5em; font-size: 2.666666667vw;}
    .header .switch{ display: flex; width: 6.666vw; height: 17px; justify-content: center; align-items: center;}
    .drawer-hamburger{ display: block; box-sizing: content-box; width: 7.2vw; height: 6.666vw; outline: 0; border: 0; background-color: transparent; transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate3d(0, 0, 0);}
    .drawer-hamburger:hover{ background: transparent; cursor: pointer;}
    .drawer-hamburger-icon{ position: relative; display: block;}
    .drawer-hamburger-icon,
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ width: 100%; height: 3px; background: #0049af; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ position: absolute; top: -7px; left: 0; content: "";}
    .drawer-hamburger-icon:after{ top: 7px;}
    .drawer-hamburger.open .drawer-hamburger-icon{ background: transparent;}
    .drawer-hamburger.open .drawer-hamburger-icon:before,
    .drawer-hamburger.open .drawer-hamburger-icon:after{ top: 0;}
    .drawer-hamburger.open .drawer-hamburger-icon:before{ transform: rotate(45deg);}
    .drawer-hamburger.open .drawer-hamburger-icon:after{ transform: rotate(-45deg);}
}

.header nav{ margin: 15px 0 0; width: 100%;}
.header nav > ul{ display: flex; letter-spacing: .1em; font-weight: 500; font-size: 1.6rem; justify-content: center; align-items: center;}
.header nav > ul > li{ padding: 0 36px;}
.header nav > ul > li.btn{ padding: 0 2px;}
.header nav > ul > li.btn1{ padding: 0 2px 0 36px;}
.header nav .btn a{ display: flex; width: 216px; height: 50px; background: #4eb0e2; color: #fff; font-weight: 500; font-size: 1.5rem; align-items: center; justify-content: center;}
.header nav .btn2 a{ background: #0049af;}
.header nav .btn i{ margin: 0 6px 0 0;}
.header nav .btn i img{ width: auto; height: 21px;}

@media screen and (max-width: 768px){
    .header nav{ position: fixed; top: 14.666vw; left: 0; z-index: 10; display: flex; visibility: hidden; flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 0 0 4vw; width: 100vw; height: calc(var(--vh, 1vh) * 100 - 14.666vw); background: #fff; opacity: 0; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
    .header nav.open{ left: 0; visibility: visible; opacity: 1; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
    .header nav > ul{ font-size: 3.733vw; flex-wrap: wrap;}
    .header nav > ul > li{ padding: 0; width: 100%; border-bottom: 1px solid #cbe2ef;}
    .header nav > ul > li a{ display: block; padding: 5.333vw 0; background: #ebf8ff; text-align: center;}
    .header nav > ul > li.btn{ padding: 4vw 4vw 4vw 0; width: 50%;}
    .header nav > ul > li.btn1{ padding: 4vw 0 4vw 4vw;}
    .header nav .btn a{ width: 100%; height: 13.333vw; letter-spacing: normal; font-size: 3.733vw;}
    .header nav .btn i{ margin: 0 .4em 0 0;}
    .header nav .btn i img{ height: 5vw;}
}

.header aside{ position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: flex-start;}
.header aside dl{ display: flex; margin: 0 24px 0 0; padding: 25px 0 0; align-items: center;}
.header aside dt{ display: flex; width: 45px; height: 45px; border: 2px solid #4eb0e2; border-radius: 100%; color: #4eb0e2; font-weight: 700; font-size: 1.3rem; justify-content: center; align-items: center;}
.header aside dd{ padding: 0 0 0 10px; font-size: 1.1rem; line-height: 1.2;}
.header aside dd span{ display: block; font-weight: 400; font-size: 2.2rem;}
.header aside ul{ display: flex; justify-content: flex-end;}
.header aside ul li{ margin: 0 9px 0 0;}
.header aside ul a{ display: flex; flex-direction: column; padding: 20px 0; width: 120px; border-radius: 0 0 15px 15px; background: #4eb0e2; color: #fff; font-weight: 700; font-size: 1.3rem; align-items: center; justify-content: center;}
.header aside ul > li:last-child a{ background: #0049af;}
.header aside ul i{ margin: 0 0 6px; width: 24px;}

@media screen and (max-width: 768px){
    .header aside{ position: relative; top: auto; right: auto; flex-direction: column; align-items: center; justify-content: center;}
    .header aside dl{ margin: 0; padding: 4vw; width: 100%; border-bottom: 1px solid #cbe2ef;}
    .header aside dt{ margin: 0; width: 11vw; height: 11vw; background: #fff; font-size: 3.2vw;}
    .header aside dd{ margin: 0; padding: 0 0 0 2.666vw; font-size: 2.666vw;}
    .header aside dd span{ font-size: 4.8vw;}
    .header aside ul{ margin: 4vw 0 0; justify-content: center;}
    .header aside ul li{ margin: 0; padding: 0 1.333vw;}
    .header aside ul a{ display: flex; flex-direction: row;padding: 0; width: 92vw; height: 13.333vw; border-radius: 0; font-size: 3.733vw; justify-content: center; align-items: center; }
    .header aside ul i{ margin: 0 .5em 0 0; width: 6.666vw;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ margin: 0 auto; padding: 180px 0 0; width: 1000px;}
main .btn1 a{ position: relative; display: flex; width: 240px; height: 33px; border-radius: 33px; background: #4eb0e2; color: #fff; font-size: 1.4rem; justify-content: center; align-items: center;}
main .btn1 a:after{ position: absolute; top: 50%; right: 14px; width: 9px; height: 16px; background: url("/img/arrow.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 768px){
    main{ padding: 14.666vw 0 0; width: 100%;}
    main .btn1 a{ width: 44vw; height: 6.4vw; border-radius: 3.2vw; font-size: 2.8vw;}
    main .btn1 a:after{ right: 14px; width: 1.573vw; height: 2.919vw;}
}

.list-news > li{ display: flex; padding: 15px 21px; border-bottom: 1px solid #dcdddd; align-items: baseline;}
.list-news time{ display: flex; width: 111px; height: 24px; align-items: center;}
.list-news .cat{ display: flex; width: 111px; height: 24px; background: #4eb0e2;color: #fff; justify-content: center; align-items: center; }
.list-news .cat.info{ background: #4eb0e2;}
.list-news .cat.etc{ background: #137ac0;}
.list-news .detail{ display: flex; padding: 0 0 0 21px; width: calc(100% - 222px); line-height: 1.75; align-items: flex-start;}
.list-news .detail a{ color: #137ac0; text-decoration: underline;}

@media screen and (max-width: 768px){
    .list-news > li{ padding: 5.333vw 0; flex-wrap: wrap;}
    .list-news time{ width: 22.8vw; height: 5vw;}
    .list-news .cat{ width: 21.8vw; height: 5vw;}
    .list-news .detail{ padding: 2.266vw 0 0; width: 100%;}
}

/* top
--------------------------------------------------- */
.top .hero{ margin: 0 calc(50% - 50vw);}

@media screen and (max-width: 768px){
    .top .hero{ margin: 0;}
}

.top .sec1{ position: relative; overflow: hidden; margin: 0 calc(50% - 50vw); padding: 15px calc(50vw - 50%) 45px; background: rgba(78,176,226,.1);}
.top .sec1 h2{ position: relative; display: inline-block; color: #137ac0; letter-spacing: .05em; font-weight: 700; font-size: 2.4rem;}
.top .sec1 h2:after{ position: absolute; bottom: -20px; left: 50%; z-index: 1; width: 261px; height: 261px; border-radius: 100%; background: #fff; content: ""; transform: translate(-50%,0);}
.top .sec1 h2 span{ position: relative; z-index: 2;}
.top .sec1 .btn1{ position: absolute; top: 15px; right: calc(50% - 500px);}
.top .list-news{ margin: 45px 0 0;}

@media screen and (max-width: 768px){
    .top .sec1{ margin: 0; padding: 5.333vw 4vw 6.666vw;}
    .top .sec1 h2{ font-size: 4vw;}
    .top .sec1 h2:after{ bottom: -3.466vw; width: 43.552vw; height: 43.552vw;}
    .top .sec1 .btn1{ top: 3.2vw; right: 4.266vw;}
    .top .list-news{ margin: 5.333vw 0 0;}
}

.top .sec2{ padding: 60px 0;}
.top .list-cnt1{ display: flex; justify-content: space-between;}
.top .list-cnt1 > li{ width: calc(50% - 20px);}
.top .list-cnt1 a{ position: relative; display: block; padding: 0 0 60px;}
.top .list-cnt1 a:before,
.top .list-cnt1 a:after{ position: absolute; left: 50%; content: ""; transform: translate(-50%,0);}
.top .list-cnt1 a:before{ bottom: 0; width: 27px; height: 27px; border-radius: 100%; background: #4eb0e2;}
.top .list-cnt1 a:after{ bottom: 8px; width: 6px; height: 12px; background: url("/img/arrow.png") no-repeat center / contain;}
.top .list-cnt1 figure{ display: flex; height: 176px; align-items: center;}
.top .list-cnt1 h2{ margin: 20px 0 0; text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2.4rem;}
.top .list-cnt1 p{ margin: 20px 0 0; line-height: 1.75;}

@media screen and (max-width: 768px){
    .top .sec2{ padding: 13.333vw 4vw;}
    .top .list-cnt1{ flex-direction: column;}
    .top .list-cnt1 > li{ width: 100%;}
    .top .list-cnt1 > li + li{ margin: 11vw 0 0;}
    .top .list-cnt1 a{ padding: 0 0 11.2vw;}
    .top .list-cnt1 a:before{ width: 8.16vw; height: 8.16vw;}
    .top .list-cnt1 a:after{ bottom: 2.133vw; width: 2.024vw; height: 3.842vw;}
    .top .list-cnt1 figure{ height: 35.2vw;}
    .top .list-cnt1 h2{ margin: 5.333vw 0 0; font-size: 6.4vw;}
    .top .list-cnt1 p{ margin: 5.333vw 0 0;}
}

.top .sec3{ margin: 0 calc(50% - 50vw); padding: 40px calc(50vw - 50%); background: rgba(78,176,226,.1);}
.top .list-cnt2{ display: flex; justify-content: space-between;}
.top .list-cnt2 > li{ width: calc(50% - 20px);}
.top .list-cnt2 .detail{ position: relative; overflow: hidden; padding: 30px 36px 90px; height: 100%; border-radius: 12px; background: #fff;}
.top .list-cnt2 h2{ color: #137ac0; text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2rem;}
.top .list-cnt2 p{ margin: 30px 0 0; min-height: 180px; line-height: 1.75;}
.top .list-cnt2 .list-btn > li{ padding: 10px 0 0;}
.top .list-cnt2 .list-btn a{ margin: 0 auto;}
.top .list-cnt2 .btn2{ position: absolute; bottom: 0; left: 0; width: 100%;}
.top .list-cnt2 .btn2 a{ position: relative; display: flex; width: 100%; height: 39px; background: #137ac0; color: #fff; font-weight: 700; font-size: 1.6rem; align-items: center; justify-content: center;}
.top .list-cnt2 .btn2 a:after{ position: absolute; top: 50%; right: 18px; width: 8px; height: 16px; background: url("/img/arrow.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 768px){
    .top .sec3{ margin: 0; padding: 8vw 4vw;}
    .top .list-cnt2{ flex-direction: column;}
    .top .list-cnt2 > li{ width: 100%;}
    .top .list-cnt2 > li + li{ margin: 5.333vw 0 0;}
    .top .list-cnt2 .detail{ padding: 8vw 8vw 16vw; border-radius: 2.666vw;}
    .top .list-cnt2 h2{ font-size: 5.333vw;}
    .top .list-cnt2 p{ margin: 4vw 0 0; min-height: 0;}
    .top .list-cnt2 .list-btn > li{ padding: 2.666vw 0 0;}
    .top .list-cnt2 .btn1 a{ width: 54.666vw; height: 8vw; border-radius: 4vw; font-size: 3.733vw;}
    .top .list-cnt2 .btn1 a:after{ right: 2.666vw; width: 1.600vw; height: 2.904vw;}
    .top .list-cnt2 .btn2 a{ height: 8.666vw; font-size: 3.733vw;}
    .top .list-cnt2 .btn2 a:after{ right: 2.666vw; width:1.584vw; height: 2.933vw;}
}

/* page
--------------------------------------------------- */
.page{ padding: 240px 0 120px;}
.page h1{ position: relative; display: inline-block; padding: 0 0 .2em; border-bottom: 4px solid #4eb0e2; letter-spacing: .1em; font-size: 3.6rem;}
.page h1:after{ position: absolute; bottom: -4px; left: 0; z-index: -1; width: 1000px; height: 4px; background: #f7f8f8; content: "";}
.page .content{ padding: 60px 0 0; line-height: 1.75;}
.page section{ margin: 90px 0 0; padding: 45px 0 0; border-top: 1px dotted #dcdddd;}
.page .list1{ margin: 0 0 0 1.2em;}
.page .list1 > li{ margin: 1em 0 0; list-style: decimal;}
.page .list1 > li:first-child{ margin: 0;}
.page .list2{ margin: 0 0 0 1.2em;}
.page .list2 > li{ list-style: disc;}

@media screen and (max-width: 768px){
    .page{ padding: 22.666vw 4vw 16vw;}
    .page h1{ border-bottom: 3px solid #4eb0e2; letter-spacing: .05em; font-size: 6.133vw; line-height: 1.35;}
    .page h1:after{ bottom: -3px; width: 92vw; height: 3px;}
    .page .content{ padding: 6vw 0 0;}
    .page section{ margin: 12vw 0 0; padding: 6vw 0 0;}
    .page .list1 > li{ margin: 1em 0 0;}
}

/* news
--------------------------------------------------- */
.pager{ margin: 60px 0 0; text-align: center;}
.wp-pagenavi{ display: flex; font-weight: 500; font-size: 1.6rem; justify-content: center;}
.wp-pagenavi > *{ margin: 0 1em;}
.wp-pagenavi .page{ padding: 0;}
.wp-pagenavi a{ color: #137ac0; text-decoration: underline;}
.wp-pagenavi a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
    .pager{ margin: 6vw 0 0;}
    .wp-pagenavi{ font-size: 3.733vw;}
    .wp-pagenavi > *{ margin: 0 .5em;}
}

/* news-single
--------------------------------------------------- */
.news-single h1{ display: block;}
.news-single h1:after{ content: none;}
.news-single .info{ display: flex; margin: 30px 0 0;}
.news-single .info > div{ margin: 0 0 0 2em;}
.news-single .entry{ padding: 0 0 60px; border-bottom: 4px solid #f7f8f8;}
.news-single .entry > *:first-child{ margin: 0;}
.news-single .entry a{ color: #137ac0; text-decoration: underline;}
.news-single .entry a:hover{ text-decoration: none;}
.news-single p{ margin: 2em 0 0;}
.news-single .btn1{ margin: 75px 0 0;}
.news-single .btn1 a{ margin: 0 auto;}

@media screen and (max-width: 768px){
    .news-single .info{ margin: 4vw 0 0;}
    .news-single .entry{ padding: 0 0 8vw;}
    .news-single .btn1{ margin: 8vw 0 0;}
    .news-single .btn1 a{ width: 54.666vw; height: 8vw; border-radius: 4vw; font-size: 3.733vw;}
    .news-single .btn1 a:after{ right: 2.666vw; width: 1.600vw; height: 2.904vw;}
}

/* about
--------------------------------------------------- */
.about section{ display: flex; justify-content: space-between; align-items: baseline;}
.about section > h2{ width: 38.2%; color: #4eb0e2; letter-spacing: .1em; font-weight: 500; font-size: 3rem;}
.about section > .detail{ width: calc(100% - 38.2%);}
.about .lead{ font-size: 1.8rem;}
.about .detail p + p{ margin: 2em 0 0;}
.about table{ text-align: left;}
.about th{ padding: 2em 0 0; width: 25%; vertical-align: baseline; white-space: nowrap;}
.about td{ padding: 2em 0 0; vertical-align: baseline;}
.about tr:first-child th,
.about tr:first-child td{ padding: 0;}
.about td dl{ display: flex; flex-wrap: wrap; align-items: baseline;}
.about td dt{ width: 25%;}
.about td dd{ width: 75%;}
.about dl{ margin: 2em 0 0;}
.about .map{ position: relative; overflow: hidden; margin: 2em 0 0; padding-top: 56.25%; height: 0;}
.about .map iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 768px){
    .about section{ flex-direction: column;}
    .about section > h2{ width: 100%; font-size: 5.333vw;}
    .about section > .detail{ padding: 4vw 0 0; width: 100%;}
    .about .lead{ font-size: 3.733vw;}
    .about th{ display: block; padding: 1em 0 0; width: 100%; font-weight: 700;}
    .about td{ display: block; padding: 0;}
    .about dl{ margin: 0;}
    .about .map{ margin: 1em 0 0;}
}

/* etc
--------------------------------------------------- */
.etc .content > section:first-child{ margin: 0; padding: 0; border: none;}
.etc .tl{ display: flex; align-items: center;}
.etc .tl .cap{ display: flex; margin: 0 0 0 1em; background: linear-gradient(transparent 60%, #dbf57d 60%); font-weight: 700; font-size: 2.4rem; align-items: center;}
.etc .tl .cap > img{ margin: 0 .5em 0 0; width: 60px;}
.etc h2{ color: #4eb0e2; letter-spacing: .05em; font-weight: 500; font-size: 3rem;}
.etc h3{ margin: 60px 0 0; padding: 0 0 5px; border-bottom: 2px solid #4eb0e2; letter-spacing: .1em; font-weight: 500; font-size: 2.4rem; line-height: 1.5;}
.etc h4{ position: relative; margin: 60px 0 0; padding: 0 0 0 30px; font-weight: 500; font-size: 2.1rem;}
.etc h4:before{ position: absolute; top: .35em; left: 0; display: block; width: 21px; height: 21px; border: 6px solid #4eb0e2; border-radius: 100%; content: "";}
.etc h5{ margin: 30px 0 0; letter-spacing: .1em; font-weight: 500; font-size: 1.8rem;}
.etc p{ margin: 1em 0 0;}
.etc .img{ margin: 30px 0 0;}
.etc h2 + .list2{ padding: 30px 0 0;}

@media screen and (max-width: 768px){
    .etc .wrap-table{ overflow-x: scroll; -webkit-overflow-scrolling: touch; margin: 4vw 0 0;}
    .etc .tl{ flex-direction: column; align-items: flex-start;}
    .etc .tl .cap{ margin: 2vw 0 0; font-size:4.266vw;}
    .etc .tl .cap > img{ width: 12vw;}
    .etc h2{ font-size: 5.333vw; line-height: 1.5;}
    .etc h3{ margin: 8vw 0 0; padding: 0 0 2vw; letter-spacing: .05em; font-size: 4.8vw;}
    .etc h4{ margin: 8vw 0 0; padding: 0 0 0 6vw; font-size: 4.266vw; line-height: 1.5;}
    .etc h4:before{ top: .3em; width: 4vw; height: 4vw; border: 1.333vw solid #4eb0e2;}
    .etc h5{ margin: 4vw 0 0; font-size: 3.733vw; line-height: 1.5;}
    .etc p{ margin: 1em 0 0;}
    .etc figure{ margin: 4vw 0 0;}
    .etc h2 + .list2{ padding: 4vw 0 0;}
}

.list-check{ margin: 30px 0 0; padding: 15px 30px 30px; background: #f7f8f8;}
.list-check li{ position: relative; margin: 15px 0 0; padding: 0 0 0 30px; font-weight: 700; font-size: 1.6rem; line-height: 1.5;}
.list-check li:before{ position: absolute; top: .1em; left: 0; width: 18px; height: 18px; border: 1px solid #dcdddd; background: #fff; content: "";}
.list-check li:after{ position: absolute; top: 1.2em; left: 0; display: block; margin: -18px 0 0; width: 18px; height: 9px; border-bottom: 3px solid #ff1966; border-left: 3px solid #ff1966; content: ''; transform: rotate(-45deg);}

@media screen and (max-width: 768px){
    .list-check{ margin: 4vw 0 0; padding: 2vw 4vw 4vw;}
    .list-check li{ margin: 2vw 0 0; padding: 0 0 0 7vw; font-size: 3.733vw;}
    .list-check li:before{ top: .1em; width: 4vw; height: 4vw;}
    .list-check li:after{ top: 1.4em; margin: -18px 0 0; width: 4vw; height: 2vw;}
}

.strong{ margin: 30px 0 0; padding: 30px; border: 2px solid; background: #f7f8f8; color: #ff1966; text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2.4rem; line-height: 1.5;}
.strong span{ display: inline; background: linear-gradient(transparent 60%, #dbf57d 60%);}
.strong dd{ padding: 15px 0 0; color: #231815; font-size: 2.1rem;}
.strong .list{ display: inline-block; margin: 15px auto 0; text-align: left;}

@media screen and (max-width: 768px){
    .strong{ margin: 4vw 0 0; padding: 4vw; font-size: 4.266vw;}
    .strong dd{ padding: 2vw 0 0; font-size: 3.466vw;}
    .strong .list{ margin: 4vw auto 0;}
}

.table-example{ margin: 30px 0 0; width: 100%; line-height: 1.2;}
.table-example thead th{ padding: 15px 0 0; border-left: 1px dashed #dcdddd; text-align: center; font-size: 1.8rem;}
.table-example thead tr th:first-child{ border: none;}
.table-example tbody td{ position: relative; padding: 30px 0 15px; width: 33%; border-left: 1px dashed #dcdddd; background: #f7f8f8; vertical-align: middle; text-align: center; font-weight: 700;}
.table-example tbody tr td:first-child{ border: none;}
.table-example tbody tr td:nth-child(2){ background: #e9f2f7;}
.table-example tbody tr td:nth-child(3){ background: #ff1966; color: #fff;}
.table-example tbody td:after{ position: absolute; top: 0; left: 0; width: 100%; height: 15px; background: #fff; content: "";}
.table-example tbody td span{ display: inline; padding: 0 .15em; color: #ff1966; font-size: 2.4rem;}
.table-example tbody tr td:nth-child(3) span{ color: #fff;}

@media screen and (max-width: 768px){
    .table-example{ margin: 0;}
    .table-example thead th{ padding: 2.666vw 0 0; white-space: nowrap; font-size: 3.733vw;}
    .table-example tbody td{ padding: 5.333vw 2.666vw 2.666vw; width: auto; white-space: nowrap;}
    .table-example tbody td:after{ height: 2.666vw;}
    .table-example tbody td span{ padding: 0 2px; font-size: 4.266vw;}
}

.table-v1{ margin: 15px 0 0; width: 100%; border: 1px solid #dcdddd; text-align: center; letter-spacing: .1em; line-height: 1.5;}
.table-v1 th{ padding: 15px 0; border: 1px solid #dcdddd; background: rgba(78,176,226,.1); color: #0049af; white-space: nowrap; font-weight: 700;}
.table-v1 td{ padding: 15px; border: 1px solid #dcdddd; white-space: nowrap; font-weight: 700;}
.table-v1 tbody th{ padding: 15px; width: 70%; background: #f7f8f8; color: #231815;}
.table-v1 tbody td{ width: 15%;}
.table-v1 tbody td.w30{ width: 30%;}
.table-v1 tbody span{ display: inline-block; padding: 0 .15em; font-size: 2.4rem;}
.etc .color{ color: #ff1966;}

@media screen and (max-width: 768px){
    .table-v1{ margin: 0;}
    .table-v1 th{ padding: 2.666vw;}
    .table-v1 td{ padding: 2.666vw; vertical-align: baseline;}
    .table-v1 tbody th{ padding: 2.666vw; text-align: left;}
    .table-v1 tbody span{ vertical-align: baseline; font-size: 4.266vw;}
}

.table-v2{ margin: 15px 0 0; width: 100%; border: 1px solid #dcdddd;}
.table-v2 th{ padding: 10px 0; width: 20%; border: 1px solid #dcdddd; background: #f7f8f8;}
.table-v2 td{ padding: 10px 0; width: 20%; border: 1px solid #dcdddd; text-align: center;}
.etc h5.color + .table-v2{ border: 2px solid #ff1966;}
table .type2 td{ background: #dbf57d;}
.ttl-type2{ display: inline-block; margin: 0 5px 0 0; width: 4rem; height: 1.4rem; background: #dbf57d;}

@media screen and (max-width: 768px){
    .table-v2{ margin: 0; border: none;}
    .table-v2 th{ padding: 2.666vw; text-align: left; white-space: nowrap;}
    .table-v2 td{ padding: 2.666vw; text-align: left; white-space: nowrap;}
    .table-v2-s thead th{ border: none;}
    .table-v2-s .last th{ border-top: 1px solid #dcdddd;}
    .table-v2-s tr td:first-child{ border-left: none;}
    .table-v2-s tr td:last-child{ border-right: none;}
    .table-v2-s tr:last-child td{ border-bottom: none;}
    .table-v2 + .wrap-table{ border: 2px solid #ff1966;}
}

.table-v3{ margin: 15px 0 0; width: 100%; border: 1px solid #dcdddd;}
.table-v3 th{ padding: 10px 20px; width: 30%; border: 1px solid #dcdddd; background: #f7f8f8; text-align: left;}
.table-v3 td{ padding: 10px 20px; border: 1px solid #dcdddd; text-align: left;}
.etc h5.color + .wrap-table .table-v3{ border: 2px solid #ff1966;}

@media screen and (max-width: 768px){
    .table-v3{ margin: 0; border: none;}
    .table-v3 th{ padding: 2.666vw; width: auto; white-space: nowrap;}
    .table-v3 td{ padding: 2.666vw; white-space: nowrap;}
    .etc h5.color + .wrap-table .table-v3{ border: none;}
    .etc h5.color + .wrap-table{ border: 2px solid #ff1966;}
    .etc h5.color + .wrap-table th{ border-left: none;}
    .etc h5.color + .wrap-table tr td:last-child{ border-right: none;}
    .etc h5.color + .wrap-table tr:first-child th{ border-top: none;}
    .etc h5.color + .wrap-table tr:first-child td{ border-top: none;}
    .etc h5.color + .wrap-table tr:last-child th{ border-bottom: none;}
    .etc h5.color + .wrap-table tr:last-child td{ border-bottom: none;}
}

.table-v4{ margin: 30px 0 0; width: 100%; border: 1px solid #dcdddd; line-height: 1.5;}
.table-v4 th{ padding: 15px; border: 1px solid #dcdddd; background: #f7f8f8; vertical-align: top; text-align: left; font-weight: 700;}
.table-v4 td{ padding: 15px; border: 1px solid #dcdddd; vertical-align: top; text-align: left;}
.table-v4 thead th{ background: #e9f2f7; color: #0049af; text-align: center; white-space: nowrap;}
.table-v4 tbody th{ width: 200px; font-weight: 400;}
.table-v4 thead th:first-child{ width: 200px;}
.table-v4 thead th:nth-child(2){ width: 294px;}
.table-v4 thead th:nth-child(3){ width: 294px;}
.table-v4 figure{ margin: 0; padding: 0 0 15px; width: 50%;}
.table-v4 + p{ margin: 15px 0 0;}
.table-v4 + p strong{ color: #ff1966;}
.table-v4 tr th:nth-child(2){ border-top: 2px solid #ff1966; border-right: 2px solid #ff1966; border-left: 2px solid #ff1966;}
.table-v4 tr th + td{ border-right: 2px solid #ff1966; border-left: 2px solid #ff1966; font-weight: 700;}
.table-v4 tr:last-child th + td{ border-bottom: 2px solid #ff1966;}

@media screen and (max-width: 768px){
    .table-v4{ margin: 0;}
    .table-v4 th{ padding: 2.666vw; text-align: center;}
    .table-v4 td{ padding: 2.666vw; white-space: nowrap;}
    .table-v4 tbody th{ width: auto;}
    .table-v4 thead th:first-child{ width: auto;}
    .table-v4 thead th:nth-child(2){ width: auto;}
    .table-v4 thead th:nth-child(3){ width: auto;}
    .table-v4 figure{ width: 26.666vw;}
    .table-v4 tr th:nth-child(2){ border-top: 2px solid #ff1966; border-right: 2px solid #ff1966; border-left: 2px solid #ff1966;}
    .table-v4 tr th + td{ border-right: 2px solid #ff1966; border-left: 2px solid #ff1966; font-weight: bold;}
    .table-v4 tr:last-child th + td{ border-bottom: 2px solid #ff1966;}
}

.list-flow{ font-size: 1.6rem;}
.list-flow li{ position: relative; display: table; margin: 30px 0 0; width: 100%; background: #e9f2f7;}
.list-flow li:nth-child(2){ background: #dbf57d;}
.list-flow li:after{ position: absolute; top: -20px; left: 50%; width: 20px; height: 10px; background: url("/img/arrow2.svg") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.list-flow li:first-child:after{ content: none;}
.list-flow span{ display: table-cell; width: 50px; background: #4eb0e2; color: #fff; vertical-align: middle; text-align: center; font-weight: 700; font-size: 2.1rem;}
.list-flow div{ display: table-cell; padding: 15px; width: calc(100% - 50px);}

@media screen and (max-width: 768px){
    .list-flow{ font-size: 3.2vw;}
    .list-flow li{ margin: 8vw 0 0;}
    .list-flow li:first-child{ margin: 4vw 0 0;}
    .list-flow li:after{ top: -5vw; width: 5.333vw; height: 2.666vw;}
    .list-flow span{ width: 15%; font-size: 5.066vw;}
    .list-flow div{ padding: 4vw; width: 85%;}
}

.etc .list-btn{ display: flex; margin: 60px 0 0; justify-content: space-between;}
.etc .list-btn > li{ width: calc(50% - 15px);}
.etc .list-btn a{ position: relative; display: flex; padding: 15px 0 30px; background: #0049af; color: #fff; text-align: center; font-weight: 700; line-height: 1.5; justify-content: center; align-items: center;}
.etc .list-btn a:after{ position: absolute; bottom: 10px; left: 50%; width: 20px; height: 10px; background: url("/img/arrow3.svg") no-repeat center / contain; content: ""; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .etc .list-btn{ flex-direction: column; margin: 8vw 0 0;}
    .etc .list-btn > li{ padding: 2vw 0 0; width: 100%;}
    .etc .list-btn a{ padding: 4vw 0 6vw;}
    .etc .list-btn a:after{ bottom: 2.666vw; width: 2.666vw; height: 1.333vw;}
}

.list-step{ display: flex; margin: 30px -15px 0;}
.list-step li{ position: relative; display: flex; flex-direction: column; padding: 0 15px; width: calc(100% / 5); text-align: center; letter-spacing: .1em;}
.list-step .s1{ display: flex; height: 30px; background: #0049af; color: #fff; font-weight: 700; align-items: center; justify-content: center;}
.list-step .s2{ position: relative; display: flex; height: 100px; background: #f7f8f8; align-items: center; justify-content: center;}
.list-step .s2s{ display: inline-block; vertical-align: middle; line-height: 1.5;}
.list-step .s2s span{ display: block; color: #ff1966;}
.list-step .s2:after{ position: absolute; top: 50%; right: -15px; margin: -18px 0 0; border-width: 15px 0 15px 15px; border-style: solid;  border-color: transparent transparent transparent #231815; content: "";}
.list-step .s3{ display: flex; height: 130px; background: #ff1966; color: #fff; font-weight: 700; font-size: 1.6rem; align-items: center; justify-content: center;}

@media screen and (max-width: 768px){
    .list-step{ flex-direction: column; margin: 8vw 0 0;}
    .list-step li{ margin: 8vw 0 0; padding: 0; width: 100%;}
    .list-step li:first-child{ margin: 0;}
    .list-step .s1{ padding: 2.666vw 0; height: auto; line-height: normal;}
    .list-step .s2{ padding: 2.666vw 0; height: auto; line-height: normal;}
    .list-step .s2:after{ top: auto; right: auto; bottom: -4vw; left: 50%; margin: 0 0 0 -4vw; border-width: 4vw 4vw 0 4vw; border-color: #231815 transparent transparent transparent;}
    .list-step .s3{ padding: 2.666vw 0; height: auto; font-size: 4.266vw; line-height: normal;}
}

.box-faq{ margin: 30px 0 0;}
.box-faq dt{ position: relative; margin: 30px 0 0; padding: 30px 0 0 45px; border-top: 2px solid #f7f8f8; font-weight: 500; font-size: 1.8rem;}
.box-faq dt:first-child{ padding: 0 0 0 45px; border: none;}
.box-faq dt:before{ position: absolute; top: 30px; left: 0; display: flex; width: 30px; height: 30px; border-radius: 100%; background: #4eb0e2; color: #fff; content: "Q"; font-weight: 700; align-items: center; justify-content: center;}
.box-faq dt:first-child:before{ top: 0;}
.box-faq dd{ position: relative; margin: 15px 0 0; padding: 0 0 0 45px;}
.box-faq dd:before{ position: absolute; top: -3px; left: 0; display: flex; width: 30px; height: 30px; border-radius: 100%; background: #0049af; color: #fff; content: "A"; font-weight: 700; font-size: 1.8rem; align-items: center; justify-content: center;}
.box-faq a{ color: #137ac0; text-decoration: underline;}
.box-faq a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
    .box-faq{ margin: 4vw 0 0;}
    .box-faq dt{ margin: 8vw 0 0; padding: 8vw 0 0 10vw; font-size: 4.266vw; line-height: 1.5;}
    .box-faq dt:first-child{ padding: 0 0 0 10vw;}
    .box-faq dt:before{ top: 8vw; width: 6vw; height: 6vw;}
    .box-faq dt:first-child:before{ top: 0;}
    .box-faq dd{ margin: 4vw 0 0; padding: 0 0 0 10vw;}
    .box-faq dd:before{ top: 0; width: 6vw; height: 6vw; font-size: 4.266vw;}
}

/* purchasing
--------------------------------------------------- */
.list-item{ display: flex; margin: -40px -20px 0; flex-wrap: wrap;}
.list-item > li{ padding: 40px 20px 0; width: 50%;}
.list-item .box{ display: flex; background: #f7f8f8; align-items: center;}
.list-item .box > figure{ width: 38.2%;}
.list-item .box > figure img{ width: 100%; height: auto;}
.list-item .box > .detail{ padding: 0 1em; width: calc(100% - 38.2%);}
.list-item .detail h2{ font-weight: 700; font-size: 1.8rem;}
.list-item .dl a{ display: flex; height: 39px; background: #137ac0; color: #fff; font-weight: 700; font-size: 1.6rem; justify-content: center; align-items: center;}
.list-item .dl2 a{ background: #dbf57d; color: #000;}
.list-item .dl i{ margin: 0 .5em 0 0;}
.list-item .dl ul{ display: flex; width: 100%;}
.list-item .dl ul > li{ width: 50%;}
.list-item .dl ul > li + li a{ background: #dbf57d; color: #000;}

@media screen and (max-width: 768px){
    .list-item{ flex-direction: column; margin: 0;}
    .list-item > li{ padding: 8vw 0 0; width: 100%;}
    .list-item .detail h2{ text-align: center; font-size: 4.266vw;}
    .list-item .detail p{ display: none;}
    .list-item .box{ padding: 4vw; flex-wrap: wrap;}
    .list-item .box > p{ padding: 4vw 0 0; width: 100%;}
    .list-item .dl a{ height: 10vw; font-size: 3.733vw;}
}

/* join
--------------------------------------------------- */
.join .content > section:first-child{ margin: 0; padding: 0; border: none;}
.join h2{ color: #4eb0e2; letter-spacing: .05em; font-size: 3rem;}
.join p{ margin: 1em 0 0;}
.join .t-right{ text-align: right;}
.join .box{ margin: 30px 0 0;}
.join .box ul{ display: flex; margin: 45px 0 0; border-left: 1px solid #dcdddd; text-align: center;}
.join .box ul > li{ display: flex; flex-direction: column; padding: 0 0 15px; width: 25%; border-right: 1px solid #dcdddd; color: #137ac0; align-items: center;}
.join .box ul > li:nth-child(even){ color: #4eb0e2;}
.join .box a{ display: flex; flex-direction: column; height: 100%; color: #137ac0; align-items: center;}
.join .box ul > li:nth-child(even) a{ color: #4eb0e2;}
.join .box .line1{ display: flex; width: 60px; height: 60px; border: 1px solid; border-radius: 100%; font-weight: 700; font-size: 2rem; align-items: center; justify-content: center;}
.join .box .line2{ margin: 15px 0 0; font-size: 1.8rem; line-height: 1.25;}
.join .box .line2 small{ display: block; margin: .5em 0 0; color: #231815; font-size: 1.2rem; line-height: 1.33;}
.join .box a .line2{ color: #137ac0;}
.join .box ul > li:nth-child(even) a .line2{ color: #4eb0e2;}
.join .cnt-wrap{ display: flex; flex-wrap: wrap;}
.join .cnt1{ padding: 0 45px 0 0; width: 50%;}
.join .cnt1 + .cnt1{ padding: 0 0 0 45px; border-left: 1px solid #dcdddd;}
.join .list{ margin: 0 0 0 1.2em; padding: 15px 0 0;}
.join .row .detail > .list:first-child{ padding: 0;}
.join .list > li{ list-style: disc;}
.join .list strong{ font-size: 1.8rem;}
.join .cnt2{ margin: 45px 0 0; width: 100%;}
.join h3{ position: relative; padding: 0 0 0 30px; font-size: 2.6rem;}
.join h3:before{ position: absolute; top: .4em; left: 0; display: block; width: 24px; height: 24px; border: 6px solid #4eb0e2; border-radius: 100%; content: "";}
.join .row{ display: flex; margin: 30px 0 0; justify-content: space-between;}
.join .row .detail{ width: calc(50% - 30px);}
.join .row .detail p{ margin: 0;}
.join .row .detail .list + p{ margin: 1em 0 0;}
.join .row table{ width: 50%; border: 1px solid #dcdddd; text-align: center;}
.join .row th{ padding: 1em; border: 1px solid #dcdddd; background: #f7f8f8; font-weight: 700;}
.join .row td{ padding: 1em; border: 1px solid #dcdddd;}

@media screen and (max-width: 768px){
    .join h2{ font-size: 5.333vw; line-height: 1.5;}
    .join .box{ margin: 8vw -4vw 0;}
    .join .box ul{ margin: 0; border-bottom: 1px solid #dcdddd; border-left: none; flex-wrap: wrap;}
    .join .box ul > li{ padding: 4.666vw 0; width: 50%; border-top: 1px solid #dcdddd;}
    .join .box ul > li:nth-child(even){ border-right: none;}
    .join .box .line1{ width: 14vw; height: 14vw; font-size: 4vw;}
    .join .box .line2{ margin: 2.666vw 0 0; font-size: 3.733vw;}
    .join .box .line2 small{ font-size: 2.4vw;}
    .join .cnt-wrap{ flex-direction: column; margin: 0; padding: 0; border: none;}
    .join .cnt1{ margin: 12vw 0 0; padding: 0; width: 100%;}
    .join .cnt1 + .cnt1{ margin: 12vw 0 0; padding: 6vw 0 0; border-top: 1px dotted #dcdddd; border-left: none;}
    .join .list{ padding: 4vw 0 0;}
    .join .list strong{ font-size: 3.733vw;}
    .join .cnt2{ margin: 8vw 0 0;}
    .join h3{ padding: 0 0 0 5.333vw; font-size: 4.266vw;}
    .join h3:before{ top: .4em; width: 4vw; height: 4vw; border: 1.333vw solid #4eb0e2;}
    .join .row{ flex-direction: column; margin: 4vw 0 0;}
    .join .row .detail{ width: 100%;}
    .join .row table{ margin: 4vw 0 0; width: 100%;}
}

/* download
--------------------------------------------------- */
.download .content > section:first-child{ margin: 0; padding: 0; border: none;}
.download h2{ color: #4eb0e2; letter-spacing: .05em; font-size: 3rem;}
.download table{ margin: 15px 0 0; width: 100%; border: 1px solid #dcdddd;}
.download th{ padding: 1em; border: 1px solid #dcdddd; background: #f7f8f8; text-align: left; white-space: nowrap; font-weight: 700;}
.download thead th{ background: rgba(78,176,226,.1); color: #0049af; text-align: center; white-space: nowrap;}
.download td{ padding: 1em; border: 1px solid #dcdddd; text-align: left;}
.download td span{ display: none;}
.download td a{ display: flex; height: 36px; background: #4eb0e2; color: #fff; align-items: center; justify-content: center;}
.download td a i{ margin: 0 .2em 0 0;}
.download tbody td:first-child{ width: 20%}
.download tbody td:nth-child(2){ width: 55%;}
.download tbody td:nth-child(3){ width: 10%; text-align: center;}
.download tbody td:nth-child(4){ width: 15%; text-align: center;}

@media screen and (max-width: 768px){
    .download section{ padding: 0; border: none;}
    .download h2{ font-size: 5.333vw}
    .download table{ margin: 0; border: none;}
    .download th{ display: block; padding: 4vw 0 0; width: 100%; border: none; background: none; font-size: 4.266vw;}
    .download thead{ display: none;}
    .download td{ display: block; padding: 1em 0 0; width: 100%; border: none;}
    .download td span{ display: inline-block;}
    .download td a{ margin: 0 0 0 auto; width: 50%; height: 9.333vw;}
    .download td a i{ margin: 0 .2em 0 0;}
    .download tbody td:first-child{ width: 100%}
    .download tbody td:nth-child(2){ width: 100%;}
    .download tbody td:nth-child(3){ width: 100%; text-align: left;}
    .download tbody td:nth-child(4){ padding: 0 0 4vw; width: 100%; border-bottom: 1px dotted #dcdddd; text-align: right;}
}

/* contact
--------------------------------------------------- */
.contact h2{ margin: 30px 0 0; color: #f00; font-weight: 700;}
.contact .lead em{ color: #f00; font-style: normal;}
.contact a{ color: #137ac0; text-decoration: underline;}
.contact a:hover{ text-decoration: none;}
.contact table{ margin: 30px 0 0; width: 100%; border-bottom: 1px dotted #dcdddd; text-align: left;}
.contact th{ padding: 30px; width: 30%; border-top: 1px dotted #dcdddd; vertical-align: baseline;}
.contact td{ padding: 30px 30px 30px 0; border-top: 1px dotted #dcdddd;}
.contact input{ padding: .5em; line-height: 1.5;}
.contact input[type="text"]{ width: 100%;}
.contact input[type="text"].short{ width: 30%;}
.contact input[type="tel"]{ width: 100%;}
.contact input[type="email"]{ width: 100%;}
.contact textarea{ padding: 1em; width: 100%; height: 300px; line-height: 1.5;}
.contact td span{ display: block; padding: 0 0 5px;}
.contact label{ display: flex; align-items: center;}
.contact label span{ margin: 0 0 0 5px; padding: 0;}
.contact td div{ padding: 30px 0 0;}
.contact td div:first-child{ padding: 0;}
.contact td div.mfp_err{ padding: 0;}
.contact .submit{ margin: 45px 0 0; text-align: center;}
.contact input[type="submit"]{ display: inline-block; margin: 0 10px; padding: 15px 0; width: 210px; border: none; border-radius: 6px; background: #137ac0; color: #fff; text-align: center; font-weight: 700; font-size: 1.6rem; cursor: pointer;}

@media screen and (max-width: 768px){
    .contact h2{ margin: 8vw 0 0;}
    .contact table{ margin: 8vw 0 0;}
    .contact th{ display: block; padding: 4vw 0 0; width: 100%; font-weight: 700;}
    .contact td{ display: block; padding: 4vw 0; width: 100%; border-top: none;}
    .contact textarea{ height: 50vw;}
    .contact label{ margin: 0 1em 0 .5em;}
    .contact td span{ padding: 0 0 .5em;}
    .contact td div{ padding: 4vw 0 0;}
    .contact .submit{ margin: 8vw 0 0;}
    .contact button{ margin: 0 2vw; padding: 4vw 0; width: 40%; font-size: 4.266vw;}
}


/* --------------------------------------------------
 aside
--------------------------------------------------- */
.aside{ position: relative; margin: 0 auto; padding: 90px 0; width: 1000px; text-align: center;}
.aside h2{ color: #137ac0; letter-spacing: .1em; font-weight: 700; font-size: 2rem;}
.aside ul{ display: flex; margin: 45px 0 0; border-left: 1px solid #dcdddd;}
.aside ul > li{ display: flex; flex-direction: column; padding: 0 0 15px; width: 25%; border-right: 1px solid #dcdddd; color: #137ac0; align-items: center;}
.aside ul > li:nth-child(even){ color: #4eb0e2;}
.aside a{ display: flex; flex-direction: column; height: 100%; color: #137ac0; align-items: center;}
.aside ul > li:nth-child(even) a{ color: #4eb0e2;}
.aside .line1{ display: flex; width: 60px; height: 60px; border: 1px solid; border-radius: 100%; font-weight: 700; font-size: 2rem; align-items: center; justify-content: center;}
.aside .line2{ margin: 15px 0 0; font-size: 1.8rem; line-height: 1.25;}
.aside .line2 small{ display: block; margin: .5em 0 0; color: #231815; font-size: 1.2rem; line-height: 1.33;}
.aside a .line2{ color: #137ac0;}
.aside ul > li:nth-child(even) a .line2{ color: #4eb0e2;}

@media screen and (max-width: 768px){
    .aside{ padding: 8vw 0 0; width: 100%;}
    .aside h2{ font-size: 4.8vw; line-height: 1.5;}
    .aside ul{ margin: 4vw 0 0; border-bottom: 1px solid #dcdddd; border-left: none; flex-wrap: wrap;}
    .aside ul > li{ padding: 4.666vw 0; width: 50%; border-top: 1px solid #dcdddd;}
    .aside ul > li:nth-child(even){ border-right: none;}
    .aside .line1{ width: 14vw; height: 14vw; font-size: 4vw;}
    .aside .line2{ margin: 2.666vw 0 0; font-size: 3.733vw;}
    .aside .line2 small{ font-size: 2.4vw;}
}

.page + .aside:after{ position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; background: rgba(78,176,226,.1); content: ""; transform: translate(-50%,0);}
.page + .aside .line1{ background: #fff;}
.page + .aside ul > li:nth-child(even){ color: #137ac0;}
.page + .aside ul > li:nth-child(even) a{ color: #137ac0;}
.page + .aside ul > li:nth-child(even) a .line2{ color: #137ac0;}

@media screen and (max-width: 768px){
    .page + .aside ul{ border-bottom: none;}
    .page + .aside ul{ border-bottom: 1px solid #fff;}
    .page + .aside ul > li{ border-top: 1px solid #fff; border-right: 1px solid #fff;}
    .page + .aside ul > li:nth-child(even){ border-right: none;}
}


/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; display: flex; margin: 0 auto; padding: 30px 0; width: 1000px; justify-content: space-between;}
.footer:before{ position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; background: #dcdddd; content: ""; transform: translate(-50%,0);}
.footer > h1 a{ display: block; height: 40px;}
.footer > h1 a img{ width: auto; height: 100%;}
.footer > div{ text-align: right; line-height: 1.5;}
.footer > div a{ display: block; color: #137ac0; text-decoration: underline;}
.footer > div a:hover{ text-decoration: none;}
.footer > div small{ font-size: 1rem;}

@media screen and (max-width: 768px){
    .footer{ position: relative; flex-direction: column; padding: 8vw 0 4vw; width: 100%; align-items: center;}
    .footer:before{ content: none;}
    .footer > h1{ padding: 0 8vw;}
    .footer > h1 a{ margin: 0 auto; width: 100%; height: auto;}
    .footer > h1 a img{ width: 100%; height: auto;}
    .footer > div{ margin: 4vw 0 0; text-align: center; line-height: 1.75;}
    .footer > div a{ display: block; color: #137ac0; text-decoration: underline;}
    .footer > div a:hover{ text-decoration: none;}
    .footer > div small{ margin: 1em 0 0; display: block; font-size: 2.666vw;}
}