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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Noto+Serif+JP:wght@500;700&display=swap');

html, body, div, 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,
u, i, center,
dl, dt, dd, ol, ul, li,
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-style:normal;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    font-size: 100%;
    vertical-align: baseline;
}
 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
 
html{
    overflow-y: scroll;
    scroll-behavior: smooth;
}
 
blockquote, q {
    quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
input, textarea,{
    margin: 0;
    padding: 0;
}
 
ol, ul{
    list-style:none;
}
 
table{
    border-collapse: collapse; 
    border-spacing:0;
}
 
caption, th{
    text-align: left;
}
 
a:focus {
    outline:none;
}
 
.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
 
.clearfix {
    min-height: 1px;
}
 
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
 
.both{
    clear:both;
}
 
.inline_block {  
    display: inline-block;  
    *display: inline;  
    *zoom: 1;  
}


p,h1,h2,h3,h4,h5{
  font-family: "Noto Sans JP",sans-serif;
}
.bold{
  font-weight: 700;
}
.serif{
  font-family: "Noto Serif JP",serif;
}

a{color: #000;text-decoration: none; font-size: clamp(14px, 1.56vw, 24px);}

p,li{font-size: clamp(14px, 1.56vw, 24px);}



.f18{font-size: clamp(12px, 1.17vw, 18px);}
.f20{font-size: clamp(14px, 1.30vw, 20px);}
.f22{font-size: clamp(14px, 1.43vw, 22px);}
.f24{font-size: clamp(14px, 1.56vw, 24px);}
.f26{font-size: clamp(16px, 1.69vw, 26px);}
.f28{font-size: clamp(16px, 1.82vw, 28px);}
.f30{font-size: clamp(18px, 1.95vw, 30px);}
.f32{font-size: clamp(18px, 2.08vw, 32px);}
.f34{font-size: clamp(20px, 2.21vw, 34px);}
.f36{font-size: clamp(20px, 2.34vw, 36px);}
.f38{font-size: clamp(22px, 2.47vw, 38px);}
.f40{font-size: clamp(22px, 2.60vw, 40px);}
.f42{font-size: clamp(24px, 2.73vw, 42px);}
.f44{font-size: clamp(24px, 2.86vw, 44px);}
.f46{font-size: clamp(26px, 2.99vw, 46px);}
.f48{font-size: clamp(26px, 3.12vw, 48px);}
.f60{font-size: clamp(36px, 3.9vw, 60px);}

.lh18{line-height: 1.8;}
.lh22{line-height: 2.2;}
.lh48{line-height:  clamp(36px, calc(3.12vw * 1.5), 72px);}

.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mt80{margin-top: 80px;}
.mt100{margin-top: 100px;} 

.red{color: red;}
.green{color: #3abe00;font-weight: 900;}
.blue{color: #1b2952;}
.yellow{background: linear-gradient(#fff 60%,#ffe955 60%);}
.yellow2{background: linear-gradient(#fff 60%,#fff6bb 60%);}
.ls1{letter-spacing: 0.1em;}
.ul{text-decoration: underline;}
.center{text-align: center;}
body{position: relative;}

header{
position: fixed;
top: 0;
left:0;
width:100%;
background: #fff;
z-index: 2;
border-bottom: 1px solid #efefef;
}
header .inner{
max-width:1200px;
padding: 10px 20px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

header .logo{
font-size: 14px;
display: flex;
align-items: center;
gap:10px;
}

.btn{
background: linear-gradient(#0c7b00, #24ff00);
color: #fff;
font-weight: bold;
border-radius: 30px;
margin: 0 auto;
padding: 20px 60px;
display: inline-block;
}

header .btn{
border-radius: 10px;
padding: 10px 40px;
margin:0;
}

section{

margin: 140px 0 0;
}

section .inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

section h1 img{
width:100%;
}

section .bg1{
background-image: url("img/img2.jpg");
background-repeat: no-repeat;
background-position: center right;
background-size: 40%;
}
section .bg2{
background-image: url("img/img3.jpg");
background-repeat: no-repeat;
background-position: top right;
background-size: 50%;
}
section .bg3{
background-image: url("img/img4.jpg");
background-repeat: no-repeat;
background-position: bottom right;
background-size: 30%;
}

section .box{
background: #f1f1f1;
padding: 40px;
}
section h2.c1,
section h2.c2{
background: #1b2952;
color:#fff;
font-weight: bold;
position: relative;
padding:0.6em 0 0.6em 4.5em;
margin-top: 80px;
margin-bottom: 40px;
}

section h2.c2{
  background: #3abe00;
}

section h2.c1 span,
section h2.c2 span{
font-size: clamp(44px, 5.72vw, 88px);
background: #fff;
color: #1b2952;
border-radius: 50%;
position: absolute;
top:50%;
left: 15px;
transform: translateY(-50%);
height: 115%;
aspect-ratio:1 / 1;
display: flex;
justify-content: center;
align-items: center;
}
section h2.c2 span{
color: #3abe00;
}

section .ckb li{
padding-left: 0.3em;
font-weight: bold;
margin: 1em 0;
display: flex;
align-items: flex-start;
gap:0.4em;
}

section .ckb li::before{
content:"";
display: block;
background-image:url("img/check1.jpg");
background-repeat: no-repeat;
background-size: contain;
width:1.5em;
height: 1.5em;
margin-top: 2px;
}

section .kakko{
text-indent: -1em;
padding-left: 1em;
display: inline-block;
}

section .attention{
font-size: 12px;
text-align: right;
}
section .column2{
column-count: 2;
}
section .column2 li{
margin:0 0 1em;
}
section .gold{
  display: flex;
  gap:3%;
}
section .gold span{
background: linear-gradient(#efcb4e 0%,#fff4af 50%,#d3ad2a 100%);
font-weight: 900;
margin: 20px 0 20px;
display: inline-block;
text-align: center;
padding: 10px;
flex:1;
}

section + section{
  border-top: 90px solid #ebebeb;
  margin-top: 70px;
}

section h3{
  font-size:clamp(18px, 2.08vw, 32px);
  font-family: "Noto Serif JP",serif;
  border-left: 14px solid #1b2952;
  color: #1b2952;
  padding: 14px;
  margin: 40px 0 20px;
  font-weight: bold;
}

section .message_box1{
  display: flex;
  align-items: center;
  gap:40px;
}
section .message_box1 img{
  
}
section .message_box1 .name{
  border-bottom: 3px solid #dbdbe1;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
section .message_box1 p{
  line-height: 1.8;
}
section .message_box2{
  display: flex;
  gap:24px;
}
section .message_box2 div{
  background: #e3ffd7;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  width:33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
section .message_box2 div span{
  color: #3abe00;
  line-height: 1.4;
  margin-bottom: 10px;
}

section .voice_box{
  display: flex;
  gap:44px;
  align-items: center;
}

section .vbline {
  border-top: 2px dotted #bebebe;
  padding-top:70px;
  margin-top: 70px;
}
section .ckb2 li{
margin: 1em 0;
padding-left: 0.3em;
display: flex;
align-items: flex-start;
gap:0.4em;
}
section .ckb2 li::before{
  content:"";
  display: block;
  background-image:url("img/check2.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  width:1.5em;
  height: 1.5em;
  margin-top: 2px;
}

section .conditions{
  background: linear-gradient(#1b2952,#3556b5 60%,#2f3f6f);
  padding: 40px;
  margin:100px 20px 0!important;
}
section .conditions h2{
  font-size: clamp(36px, 3.9vw, 60px);
  text-align: center;
  color: #fff;
  border-bottom: 5px solid #fff;
  padding: 0 0 20px;
  margin-bottom: 20px
}
section .conditions p,
section .conditions li{
  color: #fff;
}
section .conditions .yel{
  color: #fff600;
}
section .conditions .border_flex{
  display: flex;
  border: 1px solid #fff;
  padding: 30px;
  align-items: center;
  margin-top: 30px;
}
section .conditions .border_flex div{
  padding-right: 30px;
  min-width: 190px;
}
section .conditions .border_flex ul{
  border-left: 1px solid #fff;
  padding-left: 30px;
}
section .conditions .border_flex ul li{
  padding: 5px 0;
}
section .conditions .arrow{
  display: block;
  width: 0;
  height: 0;
  border-top:15px solid #fff600;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  margin: 14px auto;
}
section .conditions .next{
  display: flex;
  align-items: center;
  margin: 0;
}
section .conditions .next span{
  color: #22346c;
  background: #fff;
  padding: 0.8em 0 0.8em 0.8em;
  position: relative;
  margin-left: 1em;
  line-height: 1.4;
  font-weight: bold;
}
section .conditions .next span::after{
  content:"";
  position: absolute;
  height: 100%;
  width:1em;
  top:0;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  right:-0.95em;
  background: #fff;
}

section .nayami_box{
background: #f1f1f1;
padding: 24px 70px;
border-radius: 70px;
margin-top:40px;
display: inline-block;
}
section .nayami_box ul{
  display: inline-block;
}
section .nayami_box ul li{ 
  color: #1b2952;
  gap:0.6em;
  text-align: left;
}
section .nayami_box ul li span.bl{
  color: #0e5aff;
}

section .whitebox{
  box-shadow: 0 0 10px #99949499;
  background: linear-gradient(160deg, #fff 50%, #ececec);
  display: inline-block;
  padding: 10px 40px 10px 60px;
}
section .whitebox ul li{
  display: flex;
  align-items: flex-start;
  font-weight: bold;
  gap:0.6em;
  margin: 20px 0;
}
section .whitebox ul li::before{
  content:"";
  display: block;
  height:44px;
  width:44px;
  background: url("img/q.jpg");
  background-size: contain;
  flex-shrink: 0;
}
section .whitebox ul li span{
 text-align: left;
}
section .whiteimg{
  width: 100%;
}
footer{
background: #ebebeb;
display: flex;
justify-content: space-between;
padding: 10px 120px 10px 20px;
margin-top: 100px;
}
footer p,footer a{
  font-size: 12px;
  letter-spacing: 0;
}

.sue{
position: fixed;
bottom: 0;
right: 10px;
transition: 0.5s;
transform: translateY(0);
}
.sue:hover{
transform: translateY(5px);
}
.sue img{
vertical-align: bottom;
}
br.sp{
display: none;
}
@media screen and (max-width:899px){
footer p,footer a{
  font-size: 10px;
} 
}
@media screen and (max-width:767px){
  br.pc{display: none;}
  .mt20{margin-top: 10px;}
  .mt40{margin-top: 20px;}
  .mt60{margin-top: 30px;}
  .mt80{margin-top: 40px;}
  .mt100{margin-top: 50px;} 
  header .btn{
    padding: 10px 20px;
  }
  section .inner{
    padding: 0 20px;
  }
  section + section{
    border-top: 30px solid #ebebeb;
    margin-top: 40px;
  }
  section h2.c1 span, section h2.c2 span{
    max-width: 77px;
    max-height: 77px;
  }
  section .column2{
    column-count: 1;
  }
  section .gold{
    flex-direction: column;
  }
  section .gold span{
    margin:10px 0;
    padding: 6px;
  }
  section h3{
    padding: 7px 14px;
  }
  section .vbline{
    padding-top: 30px;
    margin-top: 30px;
  }
  section .voice_box{
    gap:22px;
  }
  section .voice_box img{
    width:25%;
  }
  section .conditions{
    padding: 20px;
  }
  section .conditions h2{
    border-bottom: 2px solid #fff;
  }
  section .conditions .border_flex{
    flex-direction: column;
    padding: 15px;
  }
  section .conditions .next span:first-child{
    margin-left: 0;
  }
  section .conditions .border_flex div{
    min-width: auto;
    padding-right: 0;
    padding-bottom: 10px;
  }
  section .conditions .border_flex ul{
    padding-left: 0;
    padding-top: 10px;
    border-left: none;
    border-top: 1px solid #fff;
    width:100%;
  }
  section .conditions p br{display: none;}
  section .nayami_box{
    padding:12px 24px;
    border-radius: 40px;
  }
  section .whitebox{
    padding: 10px 20px 10px 30px;
  }
  section .whitebox ul li::before{
    height: 30px;
    width: 30px;
    margin-top:3px;
  }
  footer{
    flex-direction: column;
    gap:10px;
  }
}
@media screen and (max-width:529px){
  header .inner{
    padding: 8px 16px;
  }
  header .btn{
    padding: 6px 20px;
    font-size: 12px;
  }
  header .logo{
    text-indent: -9999px;
  }
  header .logo img{
    height: 36px;
  }
  section{
    margin-top: 90px;
  }
  section .inner{
    padding:0 16px;
  }
  section h2.c1, section h2.c2{
    padding:0.4em 0.2em 0.4em 3em;
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  section h2.c1 span, section h2.c2 span{
    font-size: 32px;
    max-width: 56px;
    max-height: 56px;
    left:-5px;
  }
  section .attention{
    font-size: 10px;
  }
  section .bg1,
  section .bg2,
  section .bg3{
    background:transparent;
  }
  section .box{
    padding: 16px;
  }
  section .message_box1{
    flex-direction: column;
    margin-bottom: 60px;
  }
  section .message_box1 img{
    width: 40%;
  }
  section .message_box2{
    flex-direction: column;
  }
  section .message_box2 div{
    width: 100%;
  }
  section .conditions{
    padding: 16px;
  }
  section .conditions h2{
    font-size: 32px;
  }
  .f60{
    font-size: 32px;
  }
  .spf22{font-size: 22px;}
  footer p span{display: none;}
  br.sp{display: inline-block;}
  .sp_center{text-align: center;}


.btn{padding:20px;}
.sue img{width:80px;height:113px;}
}