@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
font-size:15px;
line-height:1.8;
color:#474747;
letter-spacing:0.08em;
width:100%;
max-width: 1920px;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
.loading {width: 100vw;height: 100vh;transition: all .9s;background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 9999;opacity: 1;visibility: visible;}
.loading.is-active {opacity: 0;visibility: hidden;}
.loading-animation {width: 100vw;height: 100vh;transition: all .2s;background-color: #fff;z-index: 9999;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;padding: 0 0 60px;}
.loading-animation img {width: 100px;margin: 0 0 30px;}
.loading-animation.is-active {opacity: 1;visibility: visible;}

.loader {
width: 30px;
height: 30px;
--c:no-repeat linear-gradient(#005bac 0 0);
background: var(--c),var(--c),var(--c),var(--c);
background-size: 15px 15px;
animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l5 {
0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:40px;height: 40px}
66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:40px;height: 40px}
100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}
.pc-only{display: none;}
.for-cr{display: none;}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
color:#333;
}
a.link-ul{
text-decoration: underline;
color: #0000ff;
}
a.op07:hover{
opacity:0.7;
 transition: .4s opacity;
}
a:hover{
opacity:0.7;
transition: .4s opacity;
}
a.link-text{
text-decoration:underline;
}
img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}
.sp-only{
display: none;
}
.menu-btn,
.menu-btn.active{
display: none;
}
.open{
overflow-y: hidden;
}
.drawer-menu {
display: none;
}
header{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
header .inner{
width: 94%;
max-width: 1300px;
background: #fff;
margin: 0 auto;
position: relative;
border-radius: 0 0 20px 20px;
}
header .head-logo{
width: 220px;
height: 72px;
padding: 12px 0 0;
vertical-align: middle;
}
header .logo{
width: 220px;
vertical-align: middle;
padding: 0 0 0 20px;
}
.head-site-info{
position: absolute;
top: 4px;
left: 230px;
font-family: "Poppins", sans-serif;
font-weight: 500;
line-height: 68px;
}
.head-link-box{
position: absolute;
top: 0;
right: 0;
padding: 0 20px 0 0;
}
.head-link-box li{
display: inline-block;
}
.head-link-box a{
line-height: 72px;
display: block;
padding: 0 14px;
}
.head-link-box a.to-rec-site{
line-height: 42px;
color: #fff;
background: #55acd8;
margin: 0 0 0 10px;
padding: 0 18px;
border-radius: 100px;
}
.head-link-box p.to-rec-site{
line-height: 42px;
color: #fff;
background: #cccccc;
margin: 0 0 0 10px;
padding: 0 18px;
border-radius: 100px;
}
main{
max-width: 1500px;
margin: 0 auto;
overflow: hidden;
}
section{
width: 100%;
margin: 0 auto;
}
.main{
background: url("../images/main-bg.jpg") repeat-x top center;
background-size: cover;
margin: 0 0 -60px;
}
.main-inner{
position: relative;
width: 92%;
max-width: 900px;
margin: 0 auto;
padding: 140px 0 170px;
}
.main-tag{
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
font-weight: 700;
color: #662d91;
line-height: 3;
}
.main-inner h1{
font-size: 60px;
font-weight: 700;
color: #fff;
line-height: 1.2;
-webkit-text-stroke: 2px #662d91;
text-stroke: 2px #662d91;
margin: 0 0 12%;
letter-spacing: 0.1em;
}
.main-inner p{
color: #fff;
line-height: 1.9;
}
.main-ill-pc{
width: 40%;
position: absolute;
right: -5%;
bottom: 12%;
}
.main-ill-sp{
display: none;
}
.under-contents{
width: 100%;
max-width: 1500px;
background: url("../images/under-bg.jpg") repeat-x top center;
background-size: auto 100%;
margin: 0 0 -100px;
padding: 150px 0 0;
position: relative;
top: -100px;
z-index: 0;
}
@media (min-width: 1400px) {
.main-inner{
position: relative;
width: 92%;
max-width: 1000px;
margin: 0 auto;
padding: 180px 0 170px;
}
.main-tag {
font-size: 16px;
}
.main-inner h1 {
font-size: 70px;
margin: 0 0 12%;
letter-spacing: 0.1em;
}
.main-inner p {
font-size: 16px;
}
}

.point{
padding: 3% 4%;
background: #fff;
border-radius: 50px;
position: relative;
z-index: 1;
}
.point-inner{
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.point-once{
display: flex;
justify-content: space-between;
margin: 0 0 6%;
}
.point-once-img{
width: 41%;
position: relative;
top: 10px;
}
.point-once-img img{
border-radius: 30px;
}
.point-num{
position: absolute;
width: 60px;
height: 60px;
top: -22px;
right: -30px;
text-align: center;
line-height: 55px;
background: #ffc40b;
color: #fff;
-webkit-text-stroke: 1px #4d4d4d;
text-stroke: 1px #4d4d4d;
font-size: 32px;
border-radius: 100px;
letter-spacing: 0.02em;
}
.point-once-cont{
width: 53%;
}
.point-once-cont h3{
font-size: 27px;
line-height: 1.6;
margin: 0 0 3.4%;
}
.point-once-cont p{
line-height: 1.6;
}
.point-inner .sec-head-box{
margin: 0 0 2%;
}
h2{
line-height: 1.6;
}
h2 span{
font-size: 82px;
color: #fff;
-webkit-text-stroke: 1px #4d4d4d;/*ベンダープレフィックス*/
text-stroke: 1px #4d4d4d;/*1px赤色縁取り*/
letter-spacing: 0.06em;
}
h2 p{
position: relative;
top: -10px;
display: inline-block;
font-size: 18px;
background: #fff;
margin: 0 0 0 20px;
padding: 2px 10px 2px 12px;
border: 1px solid #4d4d4d;
}
.sec-lead{
font-size: 15px;
margin: 0 0 30px;
}
.numbers,
.voice{
width: 92%;
max-width: 900px;
margin: 0 auto 3%;
}
.numbers-cont{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.numbers-once{
width:  47.5%;
margin: 0 0 5%;
padding: 3% 4% 4%;
background: #fff;
border-radius: 24px;
}
.numbers-num{
margin: 0 0 8px;
}
.numbers-once p{
margin: 0 0 4px;
}
.numbers-once p span.super{
vertical-align: super;
font-size: 0.8em;
}
.numbers-once p.att-text{
font-size: 10px;
}
.voice-cont{
}
.voice-once{
display: flex;
justify-content: space-between;
}
.voice-av{
width: 14%;
}
.voice-text{
width: 80%;
min-height: 154px;
background: #fff;
margin: 0 0 2%;
padding: 2.6% 4%;
border-radius: 44px;
position: relative;
}
.voice-text::after{
position: absolute;
content: '';
top: 30%;
left: -3.5%;
width: 3.5%;
height: 50%;
background: url("../images/voice-text-arrow.svg") no-repeat top left;
}
footer{
background: #fff;
padding: 20px 4%;
}
footer p{
font-family: "Noto Sans JP", sans-serif;
font-weight: 500;
text-align: center;
font-size: 12px;
}
@media (max-width: 1200px) {
.head-link-box a {
line-height: 72px;
display: block;
padding: 0 4px;
}
.head-link-box a.to-rec-site {
line-height: 42px;
color: #fff;
background: #55acd8;
margin: 0 0 0 4px;
padding: 0 12px;
border-radius: 100px;
}
.head-link-box p.to-rec-site {
line-height: 42px;
color: #fff;
background: #cccccc;
margin: 0 0 0 4px;
padding: 0 12px;
border-radius: 100px;
}
}
@media (max-width: 1000px) {
.head-link-box{
display: none;
}
body {
font-size:14px;
letter-spacing:0.08em;
}
.main-ill-pc {
width: 38%;
right: -5%;
bottom: 15%;
}
.menu-btn,
.menu-btn.active{
display: block;
position: absolute;
top: 0;
z-index: 5000;
width: 72px;
height: 72px;
}
.menu-btn{
right: 0;
}
.menu-btn.active .close-overlay-menu-wrap {
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 5001;
}
@media (hover: hover) {
.menu-btn.active .close-overlay-menu-wrap:hover {
cursor: pointer;
}
}
.menu-btn a{
position: relative;
display:block;
width:100%;
height:100%;
}
.menu-btn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 25%;
height: 1px;
background: #000;
width: 50%;
}
.menu-btn span:nth-of-type(1) {top:24px;}
.menu-btn span:nth-of-type(2) {top:36px;}
.menu-btn span:nth-of-type(3) {top:48px;}
.menu-btn.active span:nth-of-type(1) {
top: 28px;
left: 25%;
transform: translateY(10px) rotate(-45deg);
width: 50%;
}
.menu-btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu-btn.active span:nth-of-type(3){
top: 48px;
left: 25%;
transform: translateY(-10px) rotate(45deg);
width: 50%;
}
.drawer-menu {
display: block;
width: 94%;
max-width: 1300px;
background: #fff;
margin: 0 auto;
padding: 90px 0 20px;
position: fixed;
top: -500px;
left: 3%;
right: auto;
border-radius: 0 0 20px 20px;
z-index: 90;
overflow-y: scroll;
transition:top 500ms,opacity 800ms;
}
.open .drawer-menu{
top: 0;
transition:top 500ms;
z-index: 90!important;
}
.drawer-menu ul li{
display: block;
text-align: center;
width: 240px;
margin: 0 auto;
}
.drawer-menu ul a {
line-height: 50px;
display: block;
padding: 0 4px;
font-size: 18px;
}
.drawer-menu  ul a.to-rec-site {
line-height: 42px;
color: #fff;
background: #55acd8;
margin: 20px 0;
padding: 0 12px;
border-radius: 100px;
}
.drawer-menu  ul p.to-rec-site {
line-height: 42px;
color: #fff;
background: #cccccc;
margin: 20px 0;
padding: 0 12px;
border-radius: 100px;
}
}
@media (max-width: 767px) {
.sp-only{
display: inline;
}
.menu-btn,
.menu-btn.active{
display: block;
position: absolute;
top: 0;
z-index: 5000;
width: 64px;
height: 64px;
}
.menu-btn span:nth-of-type(1) {top:22px;}
.menu-btn span:nth-of-type(2) {top:32px;}
.menu-btn span:nth-of-type(3) {top:42px;}
.menu-btn.active span:nth-of-type(1) {
top: 26px;
left: 25%;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.menu-btn.active span:nth-of-type(2) {
opacity: 0;
}
.menu-btn.active span:nth-of-type(3){
top: 38px;
left: 25%;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}
.drawer-menu {
width: 100%;
padding: 90px 0 20px;
position: fixed;
top: -400px;
left: 0;
right: auto;
border-radius: 0 0 18px 18px;
z-index: 90;
overflow-y: scroll;
transition:top 500ms;
}
.drawer-menu ul a {
font-size: 16px;
}
body {
font-size: min(3.6vw, 20px);
letter-spacing:0.08em;
line-height: 1.6;
}
header .inner {
width: 100%;
height: 64px;
background: #fff;
margin: 0 auto;
position: relative;
border-radius: 0 0 18px 18px;
}
header .head-logo {
width: 70%;
max-width: 190px;
padding: 10px 0 0;
}
header .logo {
width: 100%;
vertical-align: middle;
padding: 0 0 0 8px;
}
.head-site-info {
left: 196px;
font-size: min(3.4vw, 14px);
line-height: 58px;
}
.main-ill-pc {
display: none;
}
.main{
background: url("../images/main-bg-sp.jpg") repeat-x;
background-size: 100% auto;
background-position: center 24px; 
margin: 0 0 -9vw;
}
.main-inner {
padding: calc(20% + 30px) 0 18vw;
}
.main-inner h1 {
font-size: 12vw;
line-height: 1.2;
margin: 0 0 4%;
letter-spacing: 0.05em;
-webkit-text-stroke: 1px #662d91;
text-stroke: 1px #662d91;
}
.main-tag {
font-family: "Noto Sans JP", sans-serif;
font-size: 3vw;
font-weight: 700;
color: #662d91;
line-height: 3;
}
.main-ill-sp{
display: block;
padding: 0 1% 3% 2%;
}
.main-inner p {
font-size: 3.5vw;
line-height: 1.7;
}
.point-inner .sec-head-box {
margin: 0 0 8%;
}
h2 span {
font-size: min(16vw, 84px);
display: block;
color: #fff;
-webkit-text-stroke: 1px #4d4d4d;
text-stroke: 1px #4d4d4d;
letter-spacing: 0.04em;
}
h2 p {
top: -10px;
display: inline-block;
font-size: min(4vw, 22px);
background: #fff;
margin: 6px 0 0;
padding: 2px 8px 2px 8px;
}
.sec-lead {
font-size: min(4vw, 22px);
margin: 0 0 6%;
}
.point {
padding: 3% 5%;
border-radius: 8vw;
}
.point-once {
display: block;
margin: 0 0 10%;
}
.point-once-img {
width: 100%;
position: relative;
top: 0;
margin: 0 0 3%;
}
.point-once-cont {
width: 100%;
}
.point-once-cont h3 {
font-size: min(5.8vw, 32px);
margin: 0 0 3%;
}
.point-num {
width: 12vw;
height: 12vw;
top: -6vw;
right: 0;
left: 0;
margin: auto;
text-align: center;
line-height: 11vw;
font-size: 7vw;
}
.point-once-img img {
border-radius: 5vw;
}
.numbers-cont {
display: block;
margin: 0 0 10%;
}
.numbers-once {
width: 100%;
margin: 0 0 5%;
padding: 4% 5% 5%;
background: #fff;
border-radius: 6vw;
}
.numbers-num {
margin: 0 0 8px;
text-align: center;
}
.numbers-num img{
width: 90%;
max-width: 400px;
text-align: center;
}
.voice-av {
width: 16%;
display: flex;
align-items: center;
padding: 0 0 4%;
}
.voice-text {
width: 78%;
min-height: auto;
margin: 0 0 4%;
padding: 4% 5%;
border-radius: 6vw;
position: relative;
}
.voice-text::after {
top: 0;
left: -5%;
width: 5%;
height: 100%;
background: url(../images/voice-text-arrow.svg) no-repeat center left;
}
.end-img img {
width: 140%;
position: relative;
left: -20%;
}
}

@media print {
body {width:1000px;}
}