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

.hero {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/***INTRO***/

.ind-intro {
    width: 100%;
    margin: -200px 0 0;
    padding: 250px 0 0;
    position: relative;
    overflow: hidden;
    background-image: url("../img/index/intro-rays.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
}

.ind-intro .ii-wrap {
    width: 98%;
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ind-intro h2.intro-mds {
    width: 60%;
    max-width: 450px;
    margin: 0 auto 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 300%;
    line-height: 180%;
    font-weight: 700;
    color: #FF5314;
}

.ind-intro .intro-txt {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 140%;
    font-weight: 600;
    line-height: 260%;
}


/***BASIC***/

section.ind-sec {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

section.ind-sec .sec-wrap {
    width: 98%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

h2.ind-mds {
    width: 100%;
    margin: 0 0 60px;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 240%;
    line-height: 180%;
    font-weight: 700;
}



/***ABOUT***/

.about {
    width: 98%;
    margin: 0 auto;
    padding: 0 0 60px;
    position: relative;
    overflow: visible;
    background-color: #FDFAF7;
    border: solid 5px #FF7040;
    border-radius: 10px;
}

.about h2.about-mds {
    width: 80%;
    max-width: 700px;
    margin: -40px auto 0;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    background-color: #FF5314;
    text-align: center;
    font-size: 210%;
    line-height: 110%;
    font-weight: 700;
    color: #FFF;
    border-radius: 10px;
}

.about .about-contents {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    
}

.about ul.about-dates {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
}

.about ul.about-dates li {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}
.about ul.about-dates li:last-child {
    margin: 0;
}

.about ul.about-dates li .label {
    width: 30%;
    padding: 30px 0;
    background-color: #3D5698;
    border-radius: 10px;
    color: #FFF;
    font-size: 140%;
}

.about ul.about-dates li .date {
    width: 68%;
    font-size: 160%;
    font-weight: 700;
}
.about ul.about-dates li .date-sm {
    font-size: 70%;
}


.senchaku-mds {
    width: 50%;
    max-width: 200px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.senchaku {
    width: 100%;
    margin: -50px 0 60px;
    padding: 60px 0 40px;
    position: relative;
    overflow: visible;
    background-color: #FFE9E2;
    border-radius: 10px;
}

.senchaku ul.senchaku-list {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
    font-size: 120%;
}
.senchaku ul.senchaku-list li {
    margin: 0 0 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.senchaku ul.senchaku-list li:last-child {
    margin: 0;
}
.senchaku ul.senchaku-list li:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 10px 0 0;
    background-image: url("../img/index/about-icon_star.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

h2.campaign-mds {
    width: 100%;
    margin: 0 0 60px;
    padding: 0;
    position: relative;
    overflow: hidden;
    color: #FF5214;
    font-size: 180%;
    font-weight: 700;
}
h2.campaign-mds:after {
    content: "";
    width: 100%;
    height: 5px;
    margin: 20px 0 0;
    display: block;
    background-color: #FF5214;
    border-radius: 5px;
}

ul.campaign-list {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
}

ul.campaign-list li {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 110%;
    line-height: 180%;
    font-weight: 600;
}
ul.campaign-list li:after {
    content: "";
    width: 100%;
    height: 3px;
    margin: 20px 0 0;
    display: block;
    background-image: url("../img/index/about-campaign_dots.svg");
    background-size: contain;
    background-repeat: repeat-x;
}
ul.campaign-list li .boxy {
    width: 95%;
    padding: 0 0 0 5%;
    position: relative;
}

ul.campaign-list li .boxy:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 10px;
    margin: 0 10px 0 0;
    background-color: #FF5314;
    border-radius: 2px;
}

/***NAGARE***/

section.ind-sec#nagare {
    background: #FFDAB9;
background: linear-gradient(0deg, rgba(255, 218, 185, .35) 0%, rgba(255, 248, 237, 1) 100%);
}

section.ind-sec#nagare h2.ind-mds {
    color: #284389;
}

ul.nagare-list {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
    font-weight: 600;
}

ul.nagare-list > li {
    width: 98%;
    margin: 0 auto 100px;
    padding: 0 0 60px;
    position: relative;
    overflow: visible;
    background-color: #FFF;
    border-radius: 20px;
    border: solid 5px #3D5698;
}
ul.nagare-list > li:after {
    content: "";
    width: 80px;
    height: 40px;
    display: block;
    position: absolute;
    bottom: -80px;
    left: 47%;
    
    margin: 30px auto 0;
    background-image: url("../img/index/nagare_arr-d.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
ul.nagare-list > li:last-child {
    margin: 0 auto;
}
ul.nagare-list > li:last-child:after {
    display: none;
}

ul.nagare-list li .nl-top {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

ul.nagare-list li .nl-top .num {
    width: 10%;
    max-width: 150px;
    padding: 30px 0;
    background-color: #3D5698;
    color: #FFF;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 300%;
    font-weight: 700;
    line-height: 110%;
    border-radius: 10px 0 70px 0;    
}

ul.nagare-list li .nl-top .title {
    width: 85%;
    margin: 0 0 0 5%;
    color: #284389;
    font-size: 160%;
    font-weight: 700;
}

.nagare-cont {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.nagare-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.nf-two .nf-step {
    width: 40%;
}

.nf-three .nf-step {
    width: 28%;
}


.nf-arr {
    width: 2%;
    padding: 10% 0 0;
}
/*

.nf-two .nf-step:first-child:after {
    content: "";
    width: 30px;
    height: 50px;
    display: inline-block;
    background-image: url("../img/index/nagare_arr-r.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
*/

.nagare-flex .nf-step .img {
    width: 80%;
    max-width: 250px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.nagare-flex .nf-step .desc {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 120%;
}

ul.nagare-list ul.red-list {
    color: #FF3131;
    list-style: disc;
}


.nagare-wide {
    align-items: center;
}

.nagare-wide  .img {
    width: 30%;
}

.nagare-wide  .desc {
    width: 65%;
    font-size: 120%;
}

/***SHISETSU***/

section.ind-sec#shisetsu-sec h2.ind-mds {
    color: #108B3F;
}

.map {
    margin: 0 0 30px;
}

.map iframe {
    border: none;
}

.map-txt {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 120%;
}


/***QANDA***/

section.ind-sec#qa-sec {
    background-color: #04A1EC;
}

section.ind-sec#qa-sec h2.ind-mds {
    color: #FFF;
}

ul.qa-list {
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    overflow: hidden;
    list-style: none;
}

ul.qa-list li {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
    overflow: hidden;
    font-size: 110%;
    font-weight: 500;
}

ul.qa-list .qa-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.qa-wrap .qa-flex {
    width: 90%;
    margin: 0 auto;
    padding: 20px 2.5%;
    position: relative;
    overflow: hidden;
    background-color: #FFF;
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.qa-flex:before {
    content: "";
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    display: inline-block;
    background-image: url("../img/index/qa_icon-q.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.answer .qa-flex:before {
    background-image: url("../img/index/qa_icon-a.svg");
}

.qa-flex .qa-title {
    width: 95%;
}

.qa-flex .qa-arr {
    width: 20px;
    transition: all 0.3s;
}

.answer {
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.answer .qa-flex {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/*****よくあるご質問EXPANDER*****/

input.qanda-opener {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.answer {
    width: 90%;
    display: block;
    margin: 0 auto;
    padding: 0 2.5%;
    position: relative;
    overflow: hidden;
    max-height: 0;
    background: transparent;
    transition: all 0.3s;;
    background-color: #ffeae1;
    border-radius: 10px;
}
/*

input.qanda-opener:checked ~ .qa-wrap {
    background-color: #FFF;
}

input.qanda-opener:checked ~ .qa-wrap .qa-arr:before {
    content:"close";
    
}
*/

input.qanda-opener:checked ~ .qa-wrap .qa-arr {
    transform: scaleY(-1);
}


input.qanda-opener:checked ~ .answer {
  max-height: 100%;
  margin:10px auto 30px;
  padding: 30px 2.5%;
}