@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

*,
::before,
::after {
    box-sizing: border-box;
}

html {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


body {
    min-width: auto !important;
    line-height: 1.4;
}

main {

    font-family: 'Shippori Mincho', serif;
    /* font-family: 'Hina Mincho', serif; */
}


body.Android main {
    font-family: "shippori-mincho", sans-serif;
}

h1 {
    font-size: 3em;
}

main h2 {
    font-size: 2.6em;
}

main h3 {
    font-size: 1.8em;
}

p {
    font-size: 1.6rem;
}

@media (max-width:767px) {
    main h1 {
        font-size: 2em;
    }

    main h2 {
        font-size: 1.8em;
    }

    main h3 {
        font-size: 1.4em;
    }

    p {
        font-size: 1.4rem;
    }
}

a{
    word-break: break-all;
}



.text-indent {
    list-style: none;
    padding-left: 1em;
    text-indent: -1em;
    display: block;
}

.text-indent2 {
    list-style: none;
    padding-left: 1.5em;
    text-indent: -1.5em;
    display: block;
}

figure img {
    max-width: 100%;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-bold {
    font-weight: bold;
}

.text-small {
    font-size: 10px;
    font-size: 1rem;
}

@media screen and (max-width: 767px) {
    .text-small {
        font-size: 0.8rem;
    }
}

.text-large {
    font-size: 18px;
    font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
    .text-large {
        font-size: 14px;
        font-size: 1.4rem;
    }
}

.text-xlarge {
    font-size: 20px;
    font-size: 2rem;
}

@media screen and (max-width: 767px) {
    .text-xlarge {
        font-size: 16px;
        font-size: 1.6rem;
    }
}

.text-xxlarge {
    font-size: 24px;
    font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
    .text-xxlarge {
        font-size: 20px;
        font-size: 2rem;
    }
}

.text-bold {
    font-weight: bold;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #000;
}

.text-red {
    color: #FF0000;
}

.text-pink {
    color: #dd758e;
}

.text-blue {
    color: #0000FF;
}

.text-yellow {
    color: #FFFF00;
}

.text-green {
    color: #008000;
}

/* gridタイル */
.row-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1em;
    margin-bottom: 1%;
}

@media screen and (max-width: 767px) {
    .row-grid {
        display: block;
    }
}

.row-grid .grid_center {
    display: grid;
    vertical-align: middle;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .row-grid .cols {
        margin-bottom: 3em;
    }
}

.row-grid .cols:last-child {
    margin-bottom: 0;
}

.row-grid .span-2 {
    grid-column: 2 span;
}

.row-grid .span-3 {
    grid-column: 3 span;
}

.row-grid .span-4 {
    grid-column: 4 span;
}

.row-grid .span-5 {
    grid-column: 5 span;
}

.row-grid .span-6 {
    grid-column: 6 span;
}

.row-grid .span-7 {
    grid-column: 7 span;
}

.row-grid .span-8 {
    grid-column: 8 span;
}

.row-grid .span-9 {
    grid-column: 9 span;
}

.row-grid .span-10 {
    grid-column: 10 span;
}

.row-grid .span-11 {
    grid-column: 11 span;
}

.row-grid .span-12 {
    grid-column: 12 span;
}

.row-grid .span_height1 {
    grid-row: 1 span;
}

.row-grid .span_height2 {
    grid-row: 2 span;
}

.row-grid .span_height3 {
    grid-row: 3 span;
}

.row-grid .span_height4 {
    grid-row: 3 span;
}

.row-grid.reverse {
    direction: rtl;
}

.row-grid.reverse p,
.row-grid.reverse h2,
.row-grid.reverse h3,
.row-grid.reverse h4,
.row-grid.reverse span,
.row-grid.reverse table {
    direction: initial;
}

@media screen and (max-width: 767px) {
    .row-grid.sp_img {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 10px;
    }

    .row-grid.sp_img.col2 .cols {
        grid-column: 6 span;
    }

    .row-grid.sp_img.col3 .cols {
        grid-column: 4 span;
    }

    .row-grid.sp_img.col4 .cols {
        grid-column: 3 span;
    }
}

.row:not(:last-child) {
    margin-bottom: 3%;
}

@media screen and (max-width: 767px) {
    .row {
        padding: 0 10px;
    }
}

.reverse .col {
    float: right;
}

.clr:after,
.col:after,
.container:after,
.group:after,
.row:after {
    content: "";
    display: table;
    clear: both;
}

.gutters .col {
    margin-left: 2%;
}

@media screen and (max-width: 767px) {
    .gutters .col {
        margin-left: 0%;
        margin-bottom: 4%;
    }

    .gutters .col:last-child {
        margin-bottom: 0%;
    }
}

.reverse>.col:last-child,
:not(.reverse)>.col:first-child {
    margin-left: 0;
}

.container {
    max-width: 1200px;
    margin: auto;
    position: relative;
}

@media screen and (max-width: 1200px) {
    .container {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.container.gutters {
    max-width: 1200px;
    margin: auto;
}

@media screen and (max-width: 1200px) {
    .container.gutters {
        width: 95%;
    }
}

.col {
    float: left;
    display: block;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .col {
        float: none;
        width: 100% !important;
    }
}

.gutters .span_2 {
    width: 16%;
}

.gutters .span_3 {
    width: 23.5%;
}

.gutters .span_4 {
    width: 31%;
}

.gutters .span_6 {
    width: 49%;
}

.gutters .span_8 {
    width: 65%;
}

.gutters .span_12 {
    width: 100%;
}

@media (max-width: 767px) {
    .sp_img.col_2>.col {
        float: left;
        width: 48% !important;
        margin-left: 2%;
    }

    .sp_img.col_2>.col:first-child {
        margin-left: 0%;
    }

    .row.sp_img.col_2 {
        margin-bottom: 2%;
    }
}

/* margin*/
.margin0 {
    margin: 0 !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.ml0 {
    margin-left: 0 !important;
}

.mr0 {
    margin-right: 0 !important;
}

.margin10 {
    margin: 10px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.margin20 {
    margin: 20px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.margin30 {
    margin: 30px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.margin40 {
    margin: 40px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.margin50 {
    margin: 50px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.mr50 {
    margin-right: 50px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

@media (min-width: 768px) {
    .pc-margin0 {
        margin: 0 !important;
    }

    .pc-mt0 {
        margin-top: 0 !important;
    }

    .pc-mb0 {
        margin-bottom: 0 !important;
    }

    .pc-ml0 {
        margin-left: 0 !important;
    }

    .pc-mr0 {
        margin-right: 0 !important;
    }

    .pc-margin10 {
        margin: 10px !important;
    }

    .pc-mt10 {
        margin-top: 10px !important;
    }

    .pc-mb10 {
        margin-bottom: 10px !important;
    }

    .pc-ml10 {
        margin-left: 10px !important;
    }

    .pc-mr10 {
        margin-right: 10px !important;
    }

    .pc-margin20 {
        margin: 20px !important;
    }

    .pc-mt20 {
        margin-top: 20px !important;
    }

    .pc-mb20 {
        margin-bottom: 20px !important;
    }

    .pc-ml20 {
        margin-left: 20px !important;
    }

    .pc-mr20 {
        margin-right: 20px !important;
    }

    .pc-margin30 {
        margin: 30px !important;
    }

    .pc-mt30 {
        margin-top: 30px !important;
    }

    .pc-mb30 {
        margin-bottom: 30px !important;
    }

    .pc-ml30 {
        margin-left: 30px !important;
    }

    .pc-mr30 {
        margin-right: 30px !important;
    }

    .pc-margin40 {
        margin: 40px !important;
    }

    .pc-mt40 {
        margin-top: 40px !important;
    }

    .pc-mb40 {
        margin-bottom: 40px !important;
    }

    .pc-ml40 {
        margin-left: 40px !important;
    }

    .pc-mr40 {
        margin-right: 40px !important;
    }

    .pc-margin50 {
        margin: 50px !important;
    }

    .pc-mt50 {
        margin-top: 50px !important;
    }

    .pc-mb50 {
        margin-bottom: 50px !important;
    }

    .pc-ml50 {
        margin-left: 50px !important;
    }

    .pc-mr50 {
        margin-right: 50px !important;
    }

    .sp-only {
        display: none !important;
    }

    .pc-text-center {
        text-align: center !important;
    }

    .pc-text-left {
        text-align: left !important;
    }

    .pc-text-right {
        text-align: right !important;
    }
}

@media (max-width: 767px) {
    .row:not(:last-child) {
        margin-bottom: 0%;
    }

    .reverse>.col:last-child,
    :not(.reverse)>.col:first-child {
        margin-left: 0;
    }


    p.text_vertical {
        font-size: 1rem;
    }

    .sp-margin0 {
        margin: 0 !important;
    }

    .sp-mt0 {
        margin-top: 0 !important;
    }

    .sp-mb0 {
        margin-bottom: 0 !important;
    }

    .sp-ml0 {
        margin-left: 0 !important;
    }

    .sp-mr0 {
        margin-right: 0 !important;
    }

    .sp-margin10 {
        margin: 10px !important;
    }

    .sp-mt10 {
        margin-top: 10px !important;
    }

    .sp-mb10 {
        margin-bottom: 10px !important;
    }

    .sp-ml10 {
        margin-left: 10px !important;
    }

    .sp-mr10 {
        margin-right: 10px !important;
    }

    .sp-margin20 {
        margin: 20px !important;
    }

    .sp-mt20 {
        margin-top: 20px !important;
    }

    .sp-mb20 {
        margin-bottom: 20px !important;
    }

    .sp-ml20 {
        margin-left: 20px !important;
    }

    .sp-mr20 {
        margin-right: 20px !important;
    }

    .sp-margin30 {
        margin: 30px !important;
    }

    .sp-mt30 {
        margin-top: 30px !important;
    }

    .sp-mb30 {
        margin-bottom: 30px !important;
    }

    .sp-ml30 {
        margin-left: 30px !important;
    }

    .sp-mr30 {
        margin-right: 30px !important;
    }

    .sp-margin40 {
        margin: 40px !important;
    }

    .sp-mt40 {
        margin-top: 40px !important;
    }

    .sp-mb40 {
        margin-bottom: 40px !important;
    }

    .sp-ml40 {
        margin-left: 40px !important;
    }

    .sp-mr40 {
        margin-right: 40px !important;
    }

    .sp-margin50 {
        margin: 50px !important;
    }

    .sp-mt50 {
        margin-top: 50px !important;
    }

    .sp-mb50 {
        margin-bottom: 50px !important;
    }

    .sp-ml50 {
        margin-left: 50px !important;
    }

    .sp-mr50 {
        margin-right: 50px !important;
    }

    .pc-only {
        display: none !important;
    }

    .sp-text-center {
        text-align: center !important;
    }

    .sp-text-left {
        text-align: left !important;
    }

    .sp-text-right {
        text-align: right !important;
    }
}

.highlights {
    background-color: #1a1a1a;
    color: #fff;
    padding: 7em 0em;
}

@media (max-width:767px) {
    .highrights {
        padding: 3em 0em;
    }
}

@media(max-width:1499px) {
    .pc-only1500 {
        display: none !important;
    }
}

@media(min-width:1500px) {
    .sp-only1500 {
        display: none !important;
    }
}