@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */


html {
    font-size: 10px;
    font-size: 3.125vw;
}

body {
    font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #333333;
}

.inner {
    position: relative;
    padding: 8% 0 0;
}
#template .inner {
    padding: 4% 0 0;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

.btn a {
    display: block;
    width: 78.23%;
    margin: 0 auto;
    padding: 4.8% 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffe500;
    border-radius: 10vw;
    -webkit-box-shadow: 0 1vw 2.5vw rgba(0,0,0,0.1);
    box-shadow: 0 1vw 2.5vw rgba(0,0,0,0.1);
    color: #003b73;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    position: relative;
}

.btn a::before, .btn.btn_under a::after {
    content: "";
    display: inline-block;
    width: 4.13%;
    padding-top: 2.61%;
    margin: 0 6% 0 0;
    background: url(../images/btn_arrow1.png) no-repeat top left;
    background-size: auto 100%;
    position: relative;
    top: -0.05em;
}

.btn.btn_under a::before {
    display: none;
}

.btn.btn_under a::after {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0 0 0 4%;
    top: -0.1em;
}

.gDef-contents section:last-child {
    padding-bottom: 15%;
}

.gDef-contents section section:last-child {
    padding-bottom: 0;
}

@media screen and (min-width:768px) {
    html {
        font-size: 0.91vw;
    }

    .inner {
        width: 93.09%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 5.45% 0 0;
    }
    #template .inner {
        padding: 5.45% 0 0;
    }

    .btn a {
        width: 100%;
        padding: 2.2vw 0 2vw;
        font-size: 1.9rem;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
        -webkit-box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.08);
        box-shadow: 0 1vw 1.5vw rgba(0,0,0,0.08);
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .btn a:hover {
        color: #fff;
        background-color: #f23a7a;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .btn a::before {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .btn a:hover::before {
        background: url(../images/btn_arrow1_hover.png) no-repeat top left;
        background-size: 100% auto;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .bnr_box a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .bnr_box a:hover {
        opacity: 0.7;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .btn.btn_under a::after {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .btn.btn_under a:hover::after {
        background: url(../images/btn_arrow1_hover.png) no-repeat top left;
        background-size: 100% auto;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .gDef-contents section:last-child {
        padding-bottom: 8%;
    }

    .gDef-contents section section:last-child {
        padding-bottom: 0;
    }
}

@media screen and (min-width:1100px) {
    html {
        font-size: 10px;
    }

    .inner {
        padding: 60px 0 0;
    }
    #template .inner {
        padding: 20px 0 0;
    }
    .btn a {
        padding: 24px 0 22px;
        -webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.08);
        box-shadow: 0 10px 15px rgba(0,0,0,0.08);
    }
}

.attention {
    background-color: #6DCEA6;
    width: 100%;
    padding: 30px 0;
    text-align: center;
}

.attention p {
    width: 80%;
    line-height: 1.5em; 
    color: #e60012;
    font-size: 2em;
    font-weight: bold;
    padding: 20px;
    margin: 0 auto;
    background-color: #ffffff;
    border: solid 2px #e60012;
}


@media screen and (max-width: 767px) {
    .attention p {
        font-size: 1.15rem;;
    }
}


/* slick
---------------------------------------------------------- */
.slick-arrow {
    width: 10%;
    padding-top: 10%;
    background-color: #f23a7a;
    border-radius: 50%;
    position: absolute;
    top: 0;
}

.slick-arrow.prev {
    left: 0;
    margin: 15% 0 0 -12%;
}

.slick-arrow.next {
    right: 0;
    margin: 15% -12% 0 0;
}

.slick-arrow::before {
    content: "";
    display: block;
    width: 32.2%;
    padding-top: 20.34%;
    background: url(../images/btn_arrow1_hover.png) no-repeat top left;
    background-size: auto 100%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    left: 0;
    margin: 40% 0 0 36.5%;
}

.slick-arrow.prev::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: 40% 0 0 31.5%;
}

@media screen and (min-width:768px) {
    .slick-arrow {
        width: 5.4%;
        padding-top: 5.4%;
        cursor: pointer;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow:hover {
        background-color: #ffe500;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow::before {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow:hover::before {
        background: url(../images/btn_arrow1.png) no-repeat top left;
        background-size: auto 100%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow.prev {
        margin: 9% 0 0 -5%;
    }

    .slick-arrow.next {
        margin: 9% -5% 0 0;
    }

    .slick-slide a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-slide a:hover {
        opacity: 0.7;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}


@media screen and (max-width:767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width:768px) {
    .sp {
        display: none !important;
    }
}

/* mCustomScrollbar
---------------------------------------------------------- */
.mCSB_inside > .mCSB_container {
    margin-right: 0 !important;
}

.mCSB_scrollTools {
    width: 10px !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 10px !important;
    background-color: #eee !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px !important;
    background-color: #f23a7a !important;
}


/* =====================================================================
*    header
* =================================================================== */
.gDef-top-banner {
    background-color: #6dcea6;
}

.gDef-contents {
    background: #d4fcf2;
    /* background-size: 10.67% auto; */
}

.header {
    position: relative;
    background-color: #fff;
}

@media screen and (min-width:768px) {
    .gDef-contents {
        /* background-size: 4.55% auto; */
    }
}

@media screen and (min-width:1100px) {
    .gDef-contents {
        /* background-size: 50px auto; */
    }
}

/* mainvisual
---------------------------------------------------------- */

.mainvisual {
    position: relative;
    background: url(../images/img_mv_sp.jpg) no-repeat left top #fbfaf0;
    background-size: 100% auto;
    border-bottom:3px solid #6bcda4;
}

.subheader .mainvisual {
    background: url(../images/img_mvsub_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

.mainvisual .inner {
    padding: 0;
}

.mainvisual .site_ttl {
    width: calc(272 / 750 * 100%);
    padding-top: calc(116 / 750 * 100%);
    background: url(../images/img_mv_logo2.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(230 / 750 * 100%) 0 0 calc(30 / 750 * 100%);
}

.mainvisual .site_ttl img {
    display: none;
}

.subheader .mainvisual .site_ttl {
    width: 37.07%;
    margin: 0 auto;
    padding-top: 1.3333%;
    background: none;
    position: relative;
}

.subheader .mainvisual .site_ttl img {
    display: block;
}

.subheader .mainvisual .site_ttl a {
    display: block;
}

.mainvisual .site_catch {
    /* width: 66.53%; */
    width: calc(416 / 750 * 100%);
    padding: calc(255 / 750 * 100%) 0 0 calc(314 / 750 * 100%);
}

.subheader .mainvisual .site_catch {
    width: 52.67%;
    margin: 0 auto;
    padding: 16% 0 1.3333%;
}

.mainvisual .info_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 92%;
    margin: 0 auto;
    padding: 6.8% 0;

}

.info_area .bnr_box {
    margin: 0 0 5.33%;
}

.info_area .bnr_box li:last-child {
    margin: 5.33% 0 0;
}

.info_area .bnr_box li a {
    display: block;
}

.info_area .info {
    padding: 7% 2% 7% 6%;
    border: 0.8vw solid #68e2f8;
    border-radius: 7vw;
    background-color: #fff;
}

.info_area .info .info_ttl {
    width: 95.57%;
    color: #003b73;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    background: url(../images/line_1.png) repeat-x bottom left;
    background-size: 15.7% auto;
    padding: 0 0 3%;
}

.info_area .info .info_box {
    position: relative;
    margin: 5.5% 0 0;
}

.info_box .info_list {
    height: 11.5em;
    overflow-y: scroll;
}

.info_box .info_list .info_adjustment {

}

.scrollbar, .pickup_scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.5%;
    background-color: #eee;
    border-radius: 2em;
}

.scrollbar-thumb, .pickup_scrollbar-thumb {
    position: relative;
    min-height: 10px;
    max-height: 100%;
    background-color: #f23a7a;
    border-radius: 2em;
}

.info_list dl {
    width: 91%;
    margin: 0 0 4%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.info_list dl:last-child {
    margin: 0;
}

.info_list dl dt {
    color: #003b73;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 2%;
}

.info_list dl dd {
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.7;
}

.info .info_link {
    width: 74.67%;
    margin: 0 auto;
    padding: 22.4% 0 19.73%;
}

.info .info_link a {
    display: block;
    -webkit-box-shadow: 0.5rem -0.35rem 0 #ad3e4b;
    box-shadow: 0.5rem -0.35rem 0 #ad3e4b;
    border-radius: 1.8rem;
}

@media screen and (min-width:768px) {
    .mainvisual {
        background:
        url(../images/bg_mv_pc1.png) no-repeat 38% top ,
        url(../images/bg_mv_pc2.png) no-repeat 46% top ,
        url(../images/bg_mv_pc3.png) no-repeat 64% top ,
        url(../images/bg_mv_pc4.png) repeat-x center top #f7f1ad;
        background-size: auto 100% ;
        overflow: hidden;
        border:none;
    }

    .subheader .mainvisual {
        background:
        url(../images/bg_mv_pc1.png) no-repeat 38% top ,
        url(../images/bg_mv_pc3.png) no-repeat 64% top ,
        url(../images/bg_mv_pc4.png) repeat-x center top #f7f1ad;
        background-size: auto;
        overflow: hidden;
    }

    .mainvisual::before {
        content: "";
        display: none;
        width: 100%;
        border-bottom: 2vw solid #fff;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .mainvisual .inner::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(430/1100 * 100%);
        background: url(../images/img_mv_pc.png) no-repeat top left;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        margin: 0 ;
    }
    .mainvisual .inner::after {
        content: "";
        display: block;
        width: calc(125/1100 * 100%);
        padding-top:calc(234/1100 * 100%);
        /* background: url(../images/img_mv_bird.png) no-repeat top left; */
        background-size: contain;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        margin: calc(118/1100 * 100%) -2% 0 0 ;
     }


    .subheader .mainvisual .inner::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(200/1100 * 100%);
        background: url(../images/img_mvsub_pc.png) no-repeat top left;
        background-size: 100% auto;
        position: absolute;
        top: 1px;
        right: 0;
        z-index: 1;
        margin: 0 ;
    }
    .subheader .mainvisual .inner::after {
        content: "";
        display: block;
        width: calc(100/1100 * 100%);
        padding-top:calc(187/1100 * 100%);
        background: url(../images/img_mv_bird.png) no-repeat top left;
        background-size: contain;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        margin: calc(104/1100 * 100%) 0 0;
     }

    .mainvisual .site_ttl {
        width: 31.55%;
        margin: 0;
        padding: 2.18% 0 0 3.45%;
        background: none;
        position: relative;
        z-index: 3;
    }
    
    .mainvisual .site_ttl img {
        display: block;
    }

    .subheader .mainvisual .site_ttl {
        width: 25.27%;
        margin: 0;
        padding: 0.91% 0 0 8.27%;
    }

    .mainvisual .site_catch {
        width: 25.36%;
        margin: 0;
        padding: 0.91% 0 0 3.45%;
        position: relative;
        z-index: 2;
    }

    .subheader .mainvisual .site_catch {
        width: 25.36%;
        margin: 0;
        padding: 0.91% 0 1.36% 8.27%;
    }

    .mainvisual .info_area {
        width: 93.09%;
        padding: 0.91% 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
        z-index: 2;
    }

    .info_area .info {
        width: 67.19%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-width: 3px;
        border-radius: 2.7vw;
        padding: 1.5% 1% 1.5% 3%;
    }

    .info_area .bnr_box {
        width: 31.64%;
        margin: 0;
    }

    .info_area .bnr_box li:last-child {
        display: block;
        margin: 3% 0 0;
    }

    .info_area .info .info_ttl {
        text-align: left;
        width: 97%;
        padding: 0 0 1.4%;
        background-size: 7.5% auto;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .info_area .info .info_box {
        margin: 2.5% 0 0;
    }

    .info_box::after, .pickup_box::after {
        content: "";
        display: block;
        width: 17px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        right: 0;
    }

    .info_box .info_list {
        height: 7em;
    }

    .info_list dl {
        display: block;
        width: 98%;
        margin: 0 0 2%;
    }

    .info_list dl dt {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.4;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
        margin: 0;
    }

    .info_list dl dd {
        font-size: 1.47rem;
        font-weight: 500;
        line-height: 1.4;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .scrollbar, .pickup_scrollbar {
        width: 10px;
        z-index: 2;
    }

    .info .info_link {
        width: 100%;
        margin: 0 19% 0 auto;
        padding: 6% 0 10.3%;
    }

    .info .info_link a {
        width: 48.63%;
        padding-top: 13.75%;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 2.2vw;
        -webkit-box-shadow: 0.65rem -0.4rem 0 #ad3e4b;
        box-shadow: 0.65rem -0.4rem 0 #ad3e4b;
        position: relative;
    }

    .info .info_link a img {
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .info .info_link a:hover img {
        margin: -0.5% -1% 0 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}

@media screen and (min-width:1100px) {
    .info_area .info {
        border-radius: 30px;
    }

    .info_box .info_list {
        height: 9.6em;
    }
}

@media screen and (min-width:1200px) {
    .mainvisual {
        background:
        url(../images/bg_mv_pc1.png) no-repeat center top ,
        url(../images/bg_mv_pc2.png) no-repeat center top ,
        url(../images/bg_mv_pc3.png) no-repeat center top ,
        url(../images/bg_mv_pc4.png) repeat-x center top #f7f1ad;
        background-size: auto 100% ;
    }

    .subheader .mainvisual {
        background:
        url(../images/bg_mv_pc1.png) no-repeat center top ,
        url(../images/bg_mv_pc3.png) no-repeat center top ,
        url(../images/bg_mv_pc4.png) repeat-x center center #f7f1ad;
        background-size: auto;
    }

    .mainvisual::before {
        /* border-bottom: 30px solid #fbfaf0; */
        display:none;
    }

}

/* nav
---------------------------------------------------------- */

.nav {
    position: relative;
    background-color: #ffe500;
}

.nav .inner {
    padding: 0;
}

.nav .menu_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 92.8%;
    margin: 0 auto;
}

.nav .menu_list li {
    height: 16.6vw;
}

.nav .menu_list li:nth-child(1) {
    width: 28.16%;
}

.nav .menu_list li:nth-child(2) {
    width: 30.75%;
}

.nav .menu_list li:nth-child(3) {
    width: 20.83%;
}

.nav .menu_list li:nth-child(4) {
    width: 19.4%;
}

.nav .menu_list li a {
    display: block;
    position: relative;
    height: 100%;
    padding: 5vw 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.nav .menu_list li a img {
    width: auto;
    height: 100%;
    height: 6.6vw;
    margin: 0 auto;
}

.nav .menu_list li:not(:first-child) a::before {
    content: "";
    display: block;
    width: 4px;
    padding-top: 7vw;
    background: url(../images/line_3.png) no-repeat right top;
    background-size: auto 100%;
    position: absolute;
    top: 5vw;
    left: -2px;
}

@media screen and (min-width:768px) {
    .nav .menu_list {
        width: 65.45%;
    }

    .nav .menu_list li {
        height: 8.6vw;
    }

    .nav .menu_list li:nth-child(1) {
        width: 27.78%;
    }

    .nav .menu_list li:nth-child(2) {
        width: 29.44%;
    }

    .nav .menu_list li:nth-child(3) {
        width: 21.81%;
    }

    .nav .menu_list li:nth-child(4) {
        width: 21.67%;
    }

    .nav .menu_list li a {
        padding: 2.6vw 0;
    }

    .nav .menu_list li:not(:first-child) a::before {
        padding-top: 4vw;
        top: 2.3vw;
    }

    .nav .menu_list li a img {
        height: 100%;
    }

    .nav .menu_list li a:hover img {
        opacity: 0.5;
    }
}

@media screen and (min-width:1100px) {
    .nav .menu_list li {
        height: 94px;
    }

    .nav .menu_list li a {
        padding: 28px 0;
    }

    .nav .menu_list li:not(:first-child) a::before {
        padding-top: 45px;
        top: 25px;
    }
}


/* =====================================================================
*    .footer
* =================================================================== */

.footer {
    position: relative;
    background: url(../images/bg_green.jpg) repeat left top;
    background-size: 128px 128px;
}

.pagetop {
    position: absolute;
    z-index: 2;
    width: 100%;
    margin: -5.3% 0 0;
}

.pagetop a {
    display: block;
    width: 10.67%;
    margin: 0 auto;
    position: relative;
}

.pagetop a::before {
    content: "";
    display: block;
    width: 22.5%;
    height: 0;
    padding-top: 23.75%;
    background: url(../images/img_pagetop_arrow.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 45% auto 0;
}

.sns {
    padding: 11% 0 7%;
}

.sns_ttl {
    width: 15.6%;
    margin: 0 auto 7%;
}

.sns_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 46.4%;
    margin: 0 auto;
}

.sns_list li {
    width: 13.22%;
}

.sns_list li:first-child {
    margin-right: 30%;
}

.sns_list li a {
    display: block;
}

@media screen and (min-width:768px) {
    .pagetop {
        margin: -3.63% 0 0;
    }

    .pagetop a {
        width: 7.27%;
    }

    .pagetop a::before {
        width: 22.5%;
        padding-top: 23.75%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .pagetop a:hover::before {
        margin-top: 35%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .sns {
        padding: 0;
    }

    .sns_ttl {
        width: 10.64%;
        margin: 0 auto;
        padding: 6.5% 0 4%;
    }

    .sns_list {
        width: 31.64%;
        padding: 0 0 4.5%;
    }

    .sns_list li a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width:1100px) {
    .pagetop {
        margin: -40px 0 0;
    }
}


/* =====================================================================
*    .popup
* =================================================================== */

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}

.popup_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.popup_area {
    width: 100%;
    height: 100%;
}

.popup_inner {
    position: relative;
    width: 92%;
    max-height: 90%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 4.67%;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1.33vw solid #68e2f8;
    margin: 5% auto 0;
}

.popup_close {
    position: relative;
    margin: -3% -1% 0 0;
}

.popup_close::before, .popup_close::after {
    content: "";
    display: block;
    width: 2px;
    padding-top: 12%;
    background-color: #f23a7a;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 4% 0 auto;
}

.popup_close::after {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.popup_list {
    width: 100%;
    height: 100%;
}

.popup_details {
    display: none;
    position: relative;
}

.popup_details_box1 {
    margin: 0 0 3%;
}

.popup_details_box2 {
    margin: 0 2% 3%;
    padding: 7% 10%;
    background-color: #fffbd9;
}

.popup_details_box3 {
    margin: 0 2% 3%;
}

.popup_details_photo {
    width: 41.67%;
    margin: 0 auto 3.5%;
}

.popup_details_txt {

}

.popup_details_name {
    color: #22ac38;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    background: url(../images/line_1.png) repeat-x bottom left;
    background-size: 15.7% auto;
    padding: 0 0 2.7%;
    margin: 0 0 4%;
}

.popup_details_txt dd {
    padding: 0 2%;
}

.popup_details_link {
    text-align: right;
}

.popup_details_link a, .popup_details_link a:hover, .popup_details_link a:active, .popup_details_link a:visited {
    color: #333;
}

.popup_txt {
    font-size: 0.95rem;
    line-height: 1.5;
}

.popup_txt_blue {
    color: #003b73;
    font-size: 0.95rem;
    line-height: 1.5;
}

.popup_txt_big {
    font-size: 1.05rem;
}

.popup_txt_small {
}

.popup_txt_bold {
    font-weight: bold;
}

.popup_center {
    text-align: center;
}

@media screen and (min-width:768px) {
    .popup_bg {
        cursor: pointer;
    }

    .popup_area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
    }

    .popup_inner {
        width: 86.5%;
        max-width: 1024px;
        height: auto;
        max-height: 86%;
        overflow-y: auto;
        -ms-flex-item-align: start;
        align-self: flex-start;
        padding: 4.55% 9.09% 2.73%;
        margin: auto;
        border-width: 10px;
    }

    .popup_close {
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        margin: 3% 3.5% 0 0;
    }

    .popup_close::before, .popup_close::after {
        padding-top: 5%;
        margin: 0 2% 0 auto;
    }

    .popup_close:hover::before, .popup_close:hover::after {
        opacity: 0.7;
    }

    .popup_list {
    }

    .popup_details_box1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 0 4%;
    }

    .popup_details_box2 {
        margin: 0 0 2%;
        padding: 3% 4%;
    }

    .popup_details_box3 {
        margin: 0 0 2%;
    }

    .popup_details_photo {
        width: 31.09%;
        margin: 0;
    }

    .popup_details_txt {
        width: 62.69%;
    }

    .popup_details_name {
        font-size: 2.4rem;
        text-align: left;
        background-size: 9.22% auto;
        padding: 0 0 1.2%;
        margin: 10% 0 4.5%;
    }

    .popup_details_txt dd {
        padding: 0;
    }

    .popup_details_link a:hover {
        opacity: 0.7;
    }

    .popup_txt {
        font-size: 1.37rem;
        line-height: 1.7;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .popup_txt_blue {
        font-size: 1.37rem;
        line-height: 1.7;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .popup_txt_big {
        font-size: 1.6rem;
        line-height: 1.7;
    }

    .popup_txt_small {
        font-size: 1.2rem;
    }
}

@media screen and (min-width:1100px) {
    .popup_inner {
        padding: 50px 100px 30px;
    }
}

/*-----------------------------------------------------
2019.04.02　テレドーム用
-----------------------------------------------------*/
	.telN {color: #000; font-weight: 900; text-decoration: none;pointer-events: none; background: linear-gradient(transparent 40%, #ffff66 0%);}
.spOnly {display: none;}
@media screen and (max-width:768px) {
	.telN {pointer-events: auto; background: linear-gradient(transparent 40%, #ffff66 0%);}
    .spOnly {display: block;}
    }
}