@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body{
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
    width: 100%;
    margin: 0 ;
    color: #000000;
    box-sizing: border-box;
    background: #ffffff !important;
}
p,a,h1,h2,h3,h4 {
    margin: 0;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
}

@media screen and (min-width:900px) {
    #contents{
        width: 70%;margin: 0 auto;
    }
    h1, h2, h3 {
        color: #2a5681;
    }
    h1 span,h2 span,h3 span {
        color: #fd7165;
    }
    .sp {
        display: none;
    }
    /*  メインビジュアル  */
    .main {
        background-image: url(../img/bg@2x.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .main_content {
        display: flex;
    }
    #contents .logo {
        width: 6%;margin: 1% 0 0 1%;
    }
    .top_text {
      text-align: center;
    }
    .main_text {
        width: 45%; font-family: "BIZ UDGothic",sans-serif;
        padding: 17% 0; color: #2a5681;
    }
    .main_text p span {
        position: relative;
    }
    .main_text p span::before {
        content: "・・・・"; position: absolute;
        top: -1em; left: 0; color: #f5d615;
    }
    .web {
        margin-top: 3%;
    }
    .main_text .app, .main_text .web {
        width: 90%; margin-top: 3%; text-align: center;
    }
    .main_text .app, .induction .app {
        display: flex;
    }
    .main_text p:nth-child(1) {
        font-size:1.4vw; letter-spacing: .1em; white-space: nowrap;
    }
    .main_text p:nth-child(2) {
        font-size:2.0vw; letter-spacing: .2em; white-space: nowrap;
    }
    .googleplay, .appstore, .website, .web img {
        width: 50%;
    }
    .app img {
        width: 100%;
    }
    .main_text .app ,.main_text .web,.main_text .text {
    }
    .main_img{
        width: 67%; margin: -2.5% 0 0;
    }
    .main_img img {
        width: 94%; margin-left: -1.5%;
    }

    /*  コンテナ１ みんトクとは？  */
    .container {
        font-family: 'Noto Sans JP',sans-serif;
    }
    .container .caption {
        border-top: solid 1px #d1d1d1;
        border-bottom: solid 1px #d1d1d1;
    }
    .fukidashi {
        position: relative; text-align: center; margin-top: -3%;
    }
    .fukidashi img {
        width: 33%;
    }
    .caption .fukidashi h2 {
        margin-top: -8%; font-size: 2.4vw; font-weight: 900;
        letter-spacing: .15em; margin-left: 1%;
    }
    .caption p {
        text-align: center; font-size: 1.6vw; margin: 5% 0 4%;
    }
    .links {
        display: flex; margin: 0 10%; justify-content: space-between;

    }
    .link {
        text-align: center; width: 25%;
    }
    .link img {
        width: 100%; margin-top: 35%;
    }
    .link h4 {
        color: #fff; margin-top: -90%; font-size: 1.2vw;
    }
    .link h4 span {
        font-size: clamp(10px,1.6vw,1.6vw);
    }

    /*  コンテナ２ みんトクの特徴  */
    .container2 {
        margin: 17% 0 10%; font-family: 'Noto Sans JP',sans-serif;
    }
    .container2 .title {
        text-align: center;
    }
    .container2 .title img {
        width: 42%;
    }
    .container2 .title h1{
        font-size: 3vw; margin-top: -9.5%;
        letter-spacing: .15em; font-weight: 900;
    }
    .container2 .title h1::after {
        content: '|'; margin-top: 6%; display: inherit;
    }
    .container2 .feature {
        display: flex; margin: 6% 0 0;
    }
    .container2 .feature_image {
        width: 26%;
    }
    .container2 .feature_image img {
        width: 82%;
    }
    .container2 .feature_text {
        width: 74%;
    }
    .container2 .feature_text h2 {
        text-shadow: .25vw 0 #2a5681,.2vw .1vw #2a5681,.15vw .15vw #2a5681,.1vw .2vw #2a5681,0 .25vw #2a5681,-.1vw .2vw #2a5681,-.15vw .15vw #2a5681,-.2vw .1vw #2a5681,-.25vw 0 #2a5681,-.2vw -.1vw #2a5681,-.15vw -.15vw #2a5681,-.1vw -.2vw #2a5681,0 -.25vw #2a5681,.1vw -.2vw #2a5681,.15vw -.15vw #2a5681,.2vw -.1vw #2a5681;
        color: #fff; font-size: 4.2vw; margin: -1% 0;
    }
    .container2 .feature_text h3 {
        font-size: 2.5vw; margin-left: -.4%; letter-spacing: -.03em;
    }
    .container2 .feature_text p {
        font-size: 1.5vw; letter-spacing: -.05em; margin-left: .3%;
    }
    .container2 .feature:nth-child(3){
        text-align: right;
    }

    /*  コンテナ３ みんトクでできること  */
    .container3 {
        font-family: 'Noto Sans JP',sans-serif; background: #d1d1d1;padding: 5% 0;
    }
    .container3 .title {
        text-align: center;
    }
    .container3 .title h1 {
        font-size: 3vw;
    }
    .container3 .title h1::after {
        content: '|';margin-top: 2%; display: inherit;
    }
    .container3 .can_do {
        display: flex; flex-wrap: wrap; justify-content: space-between;
        text-align: center;margin: 5% 8% 0;
    }
    .container3 .event, .container3 .spot, .container3 .favorite {
        background: #fff; border-radius: 2vw;
    }
    .container3 .event {
        width: 100%;
        margin-bottom: 10%;
    }
    .container3 .event .event_content {
        display: flex; height: 35vw;
    }
    .container3 .event_content, .container3 .spot_content, .container3 .favorite_content {
        width: 100%; padding: 4% 0;
    }
    .container3 .condition, .container3 .hobby {
        width: 50%;
    }
    .container3 .spot,.container3 .favorite {
        width: 48%;
    }
    .container3 .can_do img {
        width: 9vw;margin-bottom: 3%;
    }
    .container3 h4 {
        color: #fff; background: #fd7165;width: 28vw;border-radius: 10vw;
        font-size: 2.5vw;padding: .5vw 0;margin: -2.5vw auto 0;
    }
    .container3 .h4 span {
        letter-spacing: .05em;
    }
    .container3 h3 {
        font-size: 2.5vw; font-weight: 900; line-height: 1.3em;margin-bottom: 3%;
    }
    .container3 .event h3 {
        display: grid; align-items: center; height: 28%;
    }
    .container3 p {
        font-size: 1.0vw;text-align: left; line-height: 1.6em;margin: 0 10%;
    }
    .container3 .condition {
        border-right: 1px solid #7f91ad;
    }

    /*  induction アプリWEBページ誘導  */
    .induction {
        text-align: center;font-family: 'Yu Gothic',sans-serif;
        font-weight: 600; font-size: 2.5vw;padding: 10% 0;
    }
    .induction .bg img {
        width: 88%;
    }
    .induction p {
        margin-top: -3%;
    }
    .induction .app {
        margin: 1% 29%;
    }
    .induction .web img {
        width: 20%;
    }
}
@media screen and (max-width:899px) {
    #contents{
        width: 100%;margin: 0 auto;
    }
    h1, h2, h3 {
        color: #2a5681;
    }
    h1 span,h2 span,h3 span {
        color: #fd7165;
    }
    .pc {
        display: none;
    }
    /*  メインビジュアル  */
    .main {
        background-image: url(../img/bg_sp@2x.png);
        background-repeat: no-repeat;background-size: cover;
    }
    .main_content {
        display: flex;flex-wrap: wrap;flex-direction: column-reverse;
        text-align: center; margin-top: -4%;
    }
    #contents .logo {
        width: 11%;margin: 2% 0 0 2%;
    }
    .main_img {
        display: contents;
    }
    .main_img img {
        width: 94%; margin: 0 auto;
    }
    .main_text {
        font-family: 'BIZ UDPGothic',sans-serif; color: #2a5681;
        font-weight: bold;font-size: 4vw; letter-spacing: .1em;padding: 3% 0;
    }
    .main_text p span {
        position: relative;
    }
    .main_text p span::before {
        content: '・・・・'; position: absolute;
        top: -1em; left: 0; color: #fdcc00;letter-spacing: .6em;
    }
    .main_text p:nth-child(2) {
        font-size: 6.4vw;margin-top: 2.5%;
        letter-spacing: .1em;
    }
    .main_text .app {
        display: flex; margin: 3% 21%;
    }
    .main_text .app img {
        width: 100%;
    }
    .main_text .web img {
        width: 30%;
    }

    .web {
      margin-top: 20px;
    }

    /*  コンテナ１ みんトクとは？  */
    .container {
        text-align: center;font-family: 'Noto Sans JP',sans-serif;
        margin-top: 7%;
    }
    .container .caption {
        border-bottom: 1px solid #d1d1d1;
        border-top: 1px solid #d1d1d1;
    }
    .container .fukidashi {
        margin-top: -6%;
    }
    .container .fukidashi img {
        width: 62%;
    }
    .container .fukidashi h2 {
        font-weight: 900; font-size: 7vw; margin-top: -15%;
    }
    .container .caption p {
        margin: 6% 0;font-size: 3.5vw;
    }
    .container .links {
        display: flex;justify-content: space-around;margin: 10% 5%;
        font-family: 'Noto Sans JP',sans-serif;
    }
    .container .link h4 {
        color: #ffffff; background: #2a5681;width: 20vw;
        margin: 0 auto;border-radius: 10vw;
    }
    .container .link h3 {
        color: #2a5681; font-size: 3.5vw;margin: 3% 0 6%;
    }
    .container .link img {
        width: 24%;
    }

    /*  コンテナ２ みんトクの特徴  */
    .container2 {
        text-align: center;font-family: 'Noto Sans JP',sans-serif;
    }
    .container2 .title img {
        width: 64%;
    }
    .container2 .title h1 {
        font-size: 6vw; margin-top: -14%;letter-spacing: .15em;font-weight: 900;
    }
    .container2 .title h1::after {
        content: "|"; margin: 6% 0 10%; display: inherit;
    }
    .container2 .feature img {
        width: 34%;
    }
    .feature h2 {
        font-size: 14vw;color: #ffffff;margin: 5% 0 0;
        text-shadow: .5vw 0 #2a5681,.45vw .2vw #2a5681,.3vw .3vw #2a5681,.2vw .45vw #2a5681,0 .5vw #2a5681,-.2vw .45vw #2a5681,-.3vw .3vw #2a5681,-.45vw .2vw #2a5681,-.5vw 0 #2a5681,-.45vw -.2vw #2a5681,-.3vw -.3vw #2a5681,-.2vw -.45vw #2a5681,0 -.5vw #2a5681,.2vw -.45vw #2a5681,.3vw -.3vw #2a5681,.45vw -.2vw #2a5681;
    }
    .feature h3 {
        font-size: 7.5vw;line-height: 1.3em;margin: 1% 0 3%;
    }
    .feature p {
        font-size: 3.6vw;margin-bottom: 15%;
    }
    .container2 .feature:nth-child(3) {
        display: flex;flex-direction: column-reverse;
    }

    /*  コンテナ３ みんトクでできること  */
    .container3 {
        background: #d1d1d1;font-family: 'Noto Sans JP',sans-serif;
        text-align: center; padding: 6% 0;
    }
    .container3 .title h1 {
        font-size: 6vw;letter-spacing: .15em;font-weight: 900;
    }
    .container3 .title h1::after {
        content: "|";margin: 4% 0 10%;display: inherit;
    }
    .can_do .event, .can_do .spot, .can_do .favorite {
        background: #ffffff;border-radius: 4vw;
        margin: 0 6%;display: flex;flex-wrap: wrap;justify-content: center;
    }
    .can_do .spot, .can_do .favorite {
        margin: 20% 6% 10%;
    }
    .can_do h4 {
        background: #fd7165; color: #ffffff;width: 55vw;padding: 1% 0;
        margin: -6% auto 0;font-size: 5vw;border-radius: 10vw;
    }
    .can_do img {
        width: 32%;margin-bottom: 7%;
    }
    .can_do h3 {
        font-size: 5.5vw;font-weight: 900;line-height: 1.3em;margin-bottom: 7%;
    }
    .can_do p {
        font-size: 3.4vw;line-height: 1.5em;
    }
    .can_do .event_content, .can_do .spot_content, .can_do .favorite_content {
        margin: 10% 0;
    }
    .can_do .event .condition {
        margin-bottom: 30%;
    }

    /*  アプリ誘導 みんトクを始めてみよう  */
    .induction {
        padding: 10% 0;text-align: center;font-family: 'Yu Gothic',sans-serif;
        font-weight: bold;font-size: 3.6vw;
    }
    .induction .bg img {
        width: 100%;margin-top: 5%;
    }
    .induction p {
        margin-top: -7%;
    }
    .induction .app {
        margin: 1% 22%;display: flex;
    }
    .induction .app img {
        width: 100%;
    }
    .induction .web img {
        width: 30%;
    }

}