html {
    font-size: 62.5%;
    overflow-x: hidden;
}

.abkirigirisu {
    font-family: "ab-kirigirisu", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.josefin {
    font-family: "Josefin Sans", sans-serif;
}

.gothica1 {
    font-family: "Gothic A1", sans-serif;
}

body {
    color: #333333;
    font-size: 1.4rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    /* font-family: "yu-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal; */
    overflow-x: hidden;
    opacity: 0;
    transition: all 0.15s linear;
}

body.loaded {
    opacity: 1;
}

.space_anchor {
    position: relative;
    transform: translateY(-58px);
}

#about {
    transform: translateY(-110px);
}

@media screen and (max-width: 991px) {
    .space_anchor {
        transform: translateY(-78px);
    }
}

.pos_rel {
    position: relative;
}

.d-inline-block {
    display: inline-block;
}

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

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

.ani_shake {
    animation: shakes 2.5s 0s ease-in-out infinite alternate;
}

@keyframes shakes {
    to {
        translate: 0 -2rem;
    }
}

.stretchL,
.stretchR,
.stretchT {
    overflow: hidden;
    position: relative;
    opacity: 0;
}

.stretchL.on {
    animation: stretchL 1.5s ease 0s forwards;
}

@keyframes stretchL {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.stretchR.on {
    animation: stretchR 1.5s ease 0s forwards;
}

@keyframes stretchR {
    0% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.stretchT.on {
    animation: stretchT 1.5s ease 0s forwards;
}

@keyframes stretchT {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.inner {
    max-width: 1100px;
    padding: 0 15px;
    margin: 0 auto;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    max-width: 100%;
}

/* fade_up */
.fadeup {
    opacity: 0;
    transform: translateY(20px);
    transition-duration: 1s;
}

.fadeup.on {
    opacity: 1;
    transform: translateY(0);
}

/* fade_in */
.fadein {
    opacity: 0;
    transition-duration: 2s;
}

.fadein.on {
    opacity: 1;
}

/* fade_out */
.fadeout {
    opacity: 1;
    transition-duration: 2s;
}

.fadeout.on {
    opacity: 0;
}

/* fadeleft */
.fadeleft.on {
    transform: translateX(0);
    opacity: 1;
}

.fadeleft {
    transform: translateX(-20px);
    transition: 1s;
    opacity: 0;
}

/* fadeleft */
.faderight.on {
    transform: translateX(0);
    opacity: 1;
}

.faderight {
    transform: translateX(20px);
    transition: 1s;
    opacity: 0;
}

.fadesplit {
    display: block;
    overflow: hidden;
}

.fadesplit>span {
    transform: translateY(120%);
    display: inline-block;
    opacity: 0;
}

/* .on .fadesplit > span, */
.on.fadesplit>span {
    -webkit-animation: text-split 0.74s cubic-bezier(0.54, 0, 0, 0.99) 0s forwards;
    animation: text-split 0.74s cubic-bezier(0.54, 0, 0, 0.99) 0s forwards;
}

@-webkit-keyframes text-split {
    0% {
        transform: translateY(120%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes text-split {
    0% {
        transform: translateY(120%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.sec_wave {
    padding-top: 30px !important;
    overflow: visible !important;
    z-index: 0;
}

.ani_wave {
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: calc(100% - 30px);
    left: 0;
    overflow: hidden;
    z-index: -1;
}

.ani_wave.bottom {
    bottom: 0 !important;
}

@media screen and (max-width: 767px) {
    .ani_wave {
        height: 80px;
        bottom: 99%;
    }
}

.ani_wave svg {
    position: relative;
    animation: ani_wavea 15s infinite linear;
    height: 100%;
    width: 100%;
}

.ani_wave svg:last-child {
    position: absolute;
    top: 0;
    left: -1px;
    animation: ani_waveb 15s infinite linear;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .ani_wave svg {
        position: relative;
        animation: ani_wavea 7s infinite linear;
        height: 100%;
        width: 100%;
    }

    .ani_wave svg:last-child {
        position: absolute;
        top: 0;
        left: 0;
        animation: ani_waveb 7s infinite linear;
        z-index: 1;
    }
}

@keyframes ani_wavea {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes ani_waveb {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

/*==================================================================
	Header setting
===================================================================*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 30px 15px;
    z-index: 10;
    transition: all 0.3s ease-out;
}

#header .h-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

#logo {
    width: 220px;
    transition: all 0.3s ease-out;
}

#gnav {
    position: relative;
    z-index: 0;
    width: calc(100% - 400px);
    max-width: calc(100% - 230px);
}

#gnav ul {
    background: #ffffff;
    border-radius: 50px;
    padding: 30px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-out;
}

#gnav:after {
    background: #e4a40a;
    border-radius: 50px;
    content: "";
    position: absolute;
    top: 10px;
    left: 7px;
    bottom: -10px;
    right: -7px;
    mix-blend-mode: multiply;
    opacity: 0.3;
    z-index: -1;
    transition: all 0.3s ease-out;
}

#gnav ul li a {
    color: #333333;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: center;
    padding: 0 15px;
    border-left: 1px solid #cfcfcf;
    transition: all 0.3s ease-out;
}

#gnav ul li:first-child a {
    border: none;
}

#gnav ul li a:hover,
#gnav ul li.active a {
    color: #d65f83;
}

#menu {
    display: none;
}

@media screen and (min-width: 992px) {
    #header.is_fixed {
        padding: 5px 15px;
        background: rgba(255, 255, 255, 0.95);
    }

    #header.is_fixed #logo {
        width: 170px;
    }

    #header.is_fixed #gnav ul {
        background: rgba(255, 255, 255, 0);
        padding: 15px;
    }

    #header.is_fixed #gnav:after {
        opacity: 0;
    }
}

@media screen and (max-width: 1280px) {
    #gnav ul li a {
        padding: 0 20px;
    }

    #gnav ul {
        padding: 20px;
    }

    #logo {
        width: 200px;
    }
}

@media screen and (max-width: 991px) {
    #header {
        /* background: #ffffff; */
        padding: 15px !important;
    }

    #logo {
        width: 160px;
    }

    #gnav {
        background: #ffffff;
        border-radius: 0;
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        z-index: -1;
    }

    #gnav:after {
        display: none;
    }

    #gnav ul {
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 30px 15px;
    }

    #gnav ul li a {
        padding: 20px 0;
        border: none;
        display: block;
    }

    #menu {
        display: block;
        position: fixed;
        top: 10px;
        right: 15px;
        width: 45px;
        height: 58px;
        /* background: #ffffff; */
        z-index: 11;
    }

    #menu span {
        position: absolute;
        height: 2px;
        width: 90%;
        background: #ac0a0a;
        top: 50%;
        left: 5%;
        margin-top: -1px;
        transition: all 0.3s ease-out;
    }

    #menu span:nth-child(1) {
        top: calc(50% - 10px);
    }

    #menu span:nth-child(2) {
        top: calc(50% + 10px);
    }

    #menu.active span {
        opacity: 0;
    }

    #menu.active span:nth-child(1) {
        top: 50%;
        opacity: 1;
        transform: rotate(-225deg);
    }

    #menu.active span:nth-child(2) {
        top: 50%;
        opacity: 1;
        transform: rotate(225deg);
    }
}

/*==================================================================
	Footer setting
===================================================================*/
#footer {
    background: #282828;
    color: #ffffff;
    padding: 23px 0;
}

#footer .f-bottom {
    width: 100%;
    max-width: 1280px;
    padding: 0 20px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

#footer .f-bottom li {
    max-width: 100px;
    padding: 0 25px;
}

#footer .f-bottom .sitename {
    max-width: 150px;
}

#footer .copyright {
    width: 100%;
    font-size: 10px;
    font-family: "Open Sans", "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    text-align: center;
}

@media screen and (max-width: 767px) {
    #footer .copyright {
        letter-spacing: 0.01em;
    }

    #footer .f-bottom .copyright {
        font-size: 10px;
        width: 100%;
        letter-spacing: -0.05em;
    }
}

/*==================================================================
	content setting
===================================================================*/
.sec_title {
    text-align: center;
    margin: 0 0 50px;
}

.sec_title .ttl_en {
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    color: #f39939;
    margin: 0 0 30px;
}

.sec_title .ttl_jp {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    margin: 0 0 30px;
    line-height: 1.45;
}

.sec_title .txt {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
    margin: 0 0 30px;
}

.sec_title .ttl_img {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px;
}

.sec_title .ttl_img img {
    mix-blend-mode: darken;
    width: 210px;
    margin-right: 30px;
}

@media screen and (max-width: 1280px) {
    .icon_hide_tab {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .sec_title .ttl_jp {
        font-size: 2rem;
        letter-spacing: 0.01em;
    }

    .sec_title .ttl_img img {
        width: 180px;
        margin-right: 15px;
    }

    .sec_title .txt {
        font-size: 1.5rem;
    }
}

.sec_btn {
    text-align: center;
}

.sec_btn .btn_style {
    background: #003a57;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 50px;
    width: 300px;
    margin: 20px 0;
    display: inline-block;
    padding: 14px;
    position: relative;
    transition: all 0.3s ease-out;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.sec_btn .btn_style:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 3px;
    right: -3px;
    bottom: -5px;
    border: 1px solid #003a57;
    border-radius: 50px;
    transition: all 0.3s ease-out;
}

.sec_btn .btn_style:hover {
    background: #000000 !important;
}

.sec_btn .btn_style:hover:after {
    border-color: #000000 !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}

.section {
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

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

    .sec_btn .btn_style {
        font-size: 1.2rem;
        width: 260px;
        padding: 20px 10px;
    }
    .sec_top .sec_btn .btn_style {
        width: 200px;
    }
}

.mainVisual {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 110px;
    position: relative;
}

.mainVisual .mv_list {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mainVisual .mv_list .item .cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20% 20% 16% 16%;
}

.mainVisual .mv_list .item .cont .ttl_img {
    width: 86%;
    margin: 0 auto 15px;
}

.mainVisual .mv_list .item .cont .ttl {
    font-size: 4.4rem;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 5px;
}

.mainVisual .mv_list .item .cont .txt {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.8;
    text-align: center;
}

.mainVisual .mv_list .item {
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    transition: opacity .25s cubic-bezier(0.165, 0.84, 0.44, 1), rotate .25s cubic-bezier(0.165, 0.84, 0.44, 1);
    rotate: -2deg;
    opacity: 0;
    animation: none;
}

.mainVisual.on .mv_list .item {
    animation: shakes 2.5s 0s ease-in-out infinite alternate;
}

.loaded .mainVisual .mv_list .item {
    rotate: 0deg;
    opacity: 1;
}

.mainVisual .mv_list .item01 {
    width: 21.1%;
    top: 36%;
    left: 0.7%;
    z-index: 8;
    animation-delay: 0.5s !important;
    animation-duration: 3.25s !important;
    transition-delay: 1.75s;
}

.mainVisual .mv_list .item02 {
    width: 43.3%;
    left: 10.2%;
    top: 0.5%;
    z-index: 5;
    animation-delay: 0.5s !important;
    animation-duration: 3.5s !important;
    transition-delay: 0.15s;
}

.mainVisual .mv_list .item03 {
    width: 30.9%;
    top: 5.4%;
    left: 49.4%;
    animation-delay: 0.25s !important;
    animation-duration: 2.5s !important;
    transition-delay: 1s;
}

.mainVisual .mv_list .item04 {
    width: 13.1%;
    top: 0;
    left: 86.9%;
    animation-delay: 0.75s !important;
    animation-duration: 2s !important;
    transition-delay: 1.25s;
}

.mainVisual .mv_list .item05 {
    width: 44.1%;
    top: 44.65%;
    left: 7.45%;
    z-index: 7;
    animation-delay: 1.25s !important;
    animation-duration: 2.5s !important;
    transition-delay: 1.5s;
}

.mainVisual .mv_list .item06 {
    width: 48.1%;
    top: 26%;
    left: 44%;
    z-index: 6;
    animation-delay: 1.25s !important;
    animation-duration: 2s !important;
    transition-delay: 0.25s;
}

.mainVisual .mv_list .item07 {
    width: 31.1%;
    top: 63%;
    left: 30%;
    z-index: 0;
    animation-delay: 1.75s !important;
    animation-duration: 3s !important;
    transition-delay: 0.75s;
}

.mainVisual .icon_mv {
    position: absolute;
    z-index: 0;
}

.mainVisual .icon_mv img {
    transition-delay: 2.5s;
}

.mainVisual .icon_mv01 {
    width: 11.2%;
    top: 0;
    left: 0;
    transform: translateX(-50%);
}

.mainVisual .icon_mv02 {
    width: 14.3%;
    bottom: 10%;
    right: 0;
    transform: translateX(50%);
}

@media screen and (max-width: 1280px) {
    .mainVisual .mv_list .item .cont .ttl {
        font-size: 3.8vw;
    }

    .mainVisual .mv_list .item .cont .txt {
        font-size: 1.28vw;
    }
}

@media screen and (max-width: 767px) {
    .mainVisual {
        margin: 0 auto 50px;
        height: calc(100vh - 130px);
    }

    .mainVisual .mv_list {
        display: flex;
        flex-wrap: wrap;
    }

    .mainVisual .mv_list .item01 {
        top: 5%;
        right: -5%;
        left: auto;
        width: 50%;
    }

    .mainVisual .mv_list .item02 {
        width: 70%;
        left: -5%;
        top: 0;
    }

    .mainVisual .mv_list .item03 {
        width: 50%;
        bottom: 10%;
        top: auto;
        left: 5%;
        right: auto;
        z-index: 3;
    }

    .mainVisual .mv_list .item04 {
        display: none;
    }

    .mainVisual .mv_list .item05 {
        width: 100%;
        top: 20%;
        left: 0;
    }

    .mainVisual .mv_list .item06 {
        width: 80%;
        top: auto;
        left: auto;
        bottom: 15%;
        right: -10%;
    }

    .mainVisual .mv_list .item07 {
        width: 45%;
        top: 60%;
        left: -5%;
        z-index: 0;
    }

    .mainVisual .mv_list .item .cont .txt {
        font-size: 3.1vw;
    }

    .mainVisual .mv_list .item .cont .ttl_img {
        margin-bottom: 5%;
    }
}

.sec_top {
    background: url(../imgs/bg01.jpg) repeat-x center top / auto 100%;
    padding-top: 200px;
    padding-bottom: 75px;
}

.sec_top .about_block {
    margin-top: 100px;
    position: relative;
}

.sec_top .about_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 60px;
}

.sec_top .about_list .item {
    background: url(../imgs/bg_itempen.png) no-repeat left top / 100% auto;
    width: 500px;
    height: 382px;
    margin-top: 120px;
}

.sec_top .about_list .item .box {
    padding: 80px 35px 90px 105px;
    position: relative;
    height: 100%;
}

.sec_top .about_list .item .box .img_pen {
    position: absolute;
    top: auto;
    bottom: 10%;
    left: -11%;
    width: 50%;
    z-index: 0;
}

.sec_top .about_list .item .box .cont {
    position: relative;
    z-index: 1;
    height: 100%;
}

.sec_top .about_list .item .box .cont .ttl {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.3em;
    margin: 0 0 15px;
}

.sec_top .about_list .item .box .cont .txt {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.8;
}

.sec_top .about_list .item:nth-child(3) {
    margin: -20px auto 0;
}

.sec_top .about_block .icon_about {
    position: absolute;
}

.sec_top .about_block .icon_about01 {
    width: 9.5%;
    max-width: 106px;
    top: 0;
    right: 100%;
}

.sec_top .about_block .icon_about02 {
    width: 8.1%;
    max-width: 90px;
    top: 45%;
    right: 105%;
}

.sec_top .about_block .icon_about03 {
    width: 5.2%;
    max-width: 58px;
    top: 70%;
    right: 80%;
}

.sec_top .about_block .icon_about04 {
    width: 7%;
    max-width: 78px;
    top: 20%;
    left: 105%;
}

.sec_top .about_block .icon_about05 {
    width: 5%;
    max-width: 56px;
    top: 40%;
    left: 106%;
}

.sec_top .about_block .icon_about06 {
    width: 7.4%;
    max-width: 82px;
    bottom: 0;
    left: 90%;
}

.sec_top .about_block .icon_about07 {
    width: 28.6%;
    max-width: 316px;
    top: 20%;
    right: 105%;
}

.sec_top .about_block .icon_about08 {
    width: 29.6%;
    max-width: 326px;
    bottom: 0;
    right: 90%;
}

.sec_top .about_block .icon_about09 {
    width: 31%;
    max-width: 342px;
    top: -5%;
    left: 95%;
}

.sec_top .about_block .icon_about10 {
    width: 25%;
    max-width: 276px;
    bottom: 16%;
    left: 95%;
}

@media screen and (max-width: 1280px) {

    .sec_top .about_block .icon_about01,
    .sec_top .about_block .icon_about02 {
        display: none;
    }

    .sec_top .about_block .icon_about09 {
        left: 80%;
    }

    .sec_top .about_block .icon_about07 {
        top: 5%;
        right: 85%;
    }

    .sec_top .about_block .icon_about08 {
        right: 85%;
    }

    .sec_top .about_block .icon_about10 {
        bottom: 10%;
        left: 85%;
    }

    .sec_top .about_list .item .box {
        transform: scale(0.8);
    }
}

@media screen and (max-width: 991px) {
    .sec_top {
        padding-top: 130px;
    }

    .sec_top .about_list {
        justify-content: center;
    }

    .sec_top .about_list .item {
        width: 380px;
        height: 280px;
        margin-top: 50px !important;
    }

    .sec_top .about_list .item .box {
        padding: 50px 0px 90px 60px;
    }

    .sec_top .about_list .item .box .img_pen {
        bottom: 25%;
        left: -20%;
        width: 40%;
    }
}

@media screen and (max-width: 767px) {
    .sec_top .about_block {
        margin-top: 0;
    }

    .sec_top .about_block .icon_about {
        display: none;
    }

    .sec_top .about_list {
        padding: 0;
    }

    .sec_top .about_list .item .box {
        transform: scale(1);
        padding: 85px 0 0 55px;
    }

    .sec_top .about_list .item .box .cont .ttl {
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.1em;
        margin: 0 0 15px;
    }

    .sec_top .about_list .item {
        background: url(../imgs/bg_itempen_sp.png) no-repeat left top / 100% auto;
        width: 330px;
        height: 330px;
        margin-top: 0 !important;
        margin-left: 15px !important;
    }

    .sec_top .about_list .item+.item {
        margin-top: 30px !important;
    }

    .sec_top .about_list .item .box .img_pen {
        left: -7%;
        bottom: 30%;
        width: 30%;
    }

    .sec_top .about_list .item .box .cont .ttl {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
        margin: 0 0 5px;
    }

    .sec_top .about_list .item .box .cont .txt {
        /* font-size: 1.2rem; */
        font-size: 1.35rem;
        line-height: 1.45;
    }
}

.sec_summer {
    background: url(../imgs/bg_summer.jpg) no-repeat bottom center / cover;
    padding-bottom: 96px;
}

.sec_summer .ttl_summer {
    width: 356px;
    margin: 0 auto 30px;
}

.sec_summer .image01 {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 0;
}

.sec_summer .image01 .img {
    position: relative;
    z-index: 1;
}

.sec_summer .image01 .icon_cloud {
    position: absolute;
    z-index: 0;
    bottom: 5%;
    right: 84%;
    width: 33%;
}

.sec_summer .image01 .cloud01 {
    transform: rotate(10deg);
    animation-duration: 2.5s;
}

.sec_summer .image01 .cloud02 {
    z-index: 2;
    top: 0%;
    left: 84%;
    bottom: auto;
    transform: rotate(-10deg);
    animation-delay: 1s;
}

.sec_summer .image01 .cloud03 {
    bottom: 0%;
    left: 80%;
    right: auto;
    transform: rotate(-10deg);
}

.sec_summer .image01 .lbl {
    background: #ac0a0a;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.2;
    position: absolute;
    top: 15%;
    right: 16%;
    max-width: 280px;
    padding: 13px;
    text-align: center;
    width: 30%;
}

.sec_summer .image01 .lbl .small {
    font-size: 80%;
}

.sec_summer .color_block {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 710px;
    margin: 15px auto 0;
    position: relative;
    z-index: 0;
}

.sec_summer .color_block:before {
    border-radius: 50px;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    background: #05636d;
    opacity: 0.3;
    z-index: -1;
}

.sec_summer .color_list {
    background: #ffffff;
    border-radius: 50px;
    padding: 20px 80px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.sec_summer .color_list .item {
    width: 33.33%;
    padding: 0 15px;
    margin: 0;
    display: flex;
    align-items: center;
}

.sec_summer .color_list .item .txt {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
}

.sec_summer .color_list .item .color {
    background: #cb9369;
    border-radius: 50%;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    margin-top: 3px;
}

.sec_summer .color_list .item .color.c_cotton {
    background: #cc959c;
}

.sec_summer .color_list .item .color.c_morning {
    background: #a784ad;
}

.sec_summer .color_list .item .color.c_bee {
    background: #b65f41;
}

.sec_summer .color_list .item .color.c_brown {
    background: #6e8381;
}

.sec_summer .color_list .item .color.c_sheep {
    background: #7eaab2;
}

.sec_summer .icon_summner {
    position: absolute;
    z-index: 0;
}

.sec_summer .icon_summner01 {
    top: 50px;
    left: calc((100vw - 1100px)/2);
    width: 21.4%;
    max-width: 276px;
    transform: translateX(-110%);
}

.sec_summer .icon_summner02 {
    top: 30px;
    right: calc((100vw - 1100px)/2);
    transform: translateX(110%);
    width: 17.7%;
    max-width: 228px;
}

.sec_summer .icon_summner03 {
    bottom: -15px;
    left: calc((100vw - 1100px)/2);
    width: 13%;
    max-width: 168px;
    transform: translateX(-110%);
}

.sec_summer .icon_summner04 {
    bottom: 15px;
    right: calc((100vw - 1100px)/2);
    transform: translateX(110%);
    width: 12.6%;
    max-width: 164px;
}

@media screen and (max-width: 1280px) {
    .sec_summer .icon_summner01 {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .sec_summer {
        padding-bottom: 40px;
    }

    .sec_summer .ttl_summer {
        width: 220px;
    }

    .sec_summer .image01 .lbl {
        font-size: 2.6vw;
        letter-spacing: 0.01em;
        padding: 5px;
        width: 28%;
    }

    .sec_summer .color_list {
        border-radius: 20px;
        padding: 10px 30px;
    }

    .sec_summer .color_block::before {
        border-radius: 20px;
    }

    .sec_summer .color_list .item {
        width: 50%;
        padding: 0 10px;
    }

    .sec_summer .color_list .item .color {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    .sec_summer .color_list .item .txt {
        font-size: 1.4rem;
        letter-spacing: 0.01em;
    }
}

.sec_bnr {
    padding: 7% 15px 10%;
    position: relative;
}

.sec_bnr .lbl {
    background: #ac0a0a;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.2;
    position: absolute;
    top: 30px;
    right: 15px;
    width: 280px;
    padding: 13px;
    text-align: center;
}

.sec_bnr .lbl .small {
    font-size: 80%;
}

.sec_bnr .ttl {
    width: 35vw;
    margin: 0 auto;
}

.sec_bnr .image {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sec_bnr .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1280px) {
    .sec_bnr .ttl {
        width: 42vw;
    }
}

@media screen and (max-width: 767px) {
    .sec_bnr {
        padding: 20% 15px 15%;
    }

    .sec_bnr .ttl {
        width: 80vw;
    }

    .sec_bnr .lbl {
        font-size: 2.6vw;
        letter-spacing: -0.05em;
        padding: 5px;
        width: 30%;
    }
}

.sec_volume {
    background: #f1f1f1;
    padding-bottom: 110px;
    position: relative;
}

/*
.sec_volume::before {
    content: "";
    display: inline-block;
    width: 100vw;
    height: 24px;
    background-image: url('../imgs/icon_creative_01.png');
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 20px;

}
*/
.sec_volume .sec_title {
    margin: 0 0 35px;
}

.sec_volume .sec_title .ttl_en {
    display: inline-block;
    color: #c9a444;
    margin: 10px 0 0;
    font-size: 2.4rem;
}

.sec_volume .sec_title .ttl_volume {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.sec_volume .sec_title .ttl_volume .icon {
    width: 75px;
    position: absolute;
}

.sec_volume .sec_title .ttl_volume .icon01 {
    top: -50px;
    left: -50px;
}

.sec_volume .sec_title .ttl_volume .icon02 {
    bottom: -20px;
    right: -100px;
}

.sec_volume .profile_block {
    position: relative;
    z-index: 0;
    margin: 0 0 100px;
}

.sec_volume .icon_profile {
    position: absolute;
    z-index: -1;
}

.sec_volume .icon_profile01 {
    width: 12.1%;
    max-width: 136px;
    top: 85%;
    right: 97%;
    animation-duration: 2.5s;
}

.sec_volume .icon_profile02 {
    width: 46.1%;
    max-width: 514px;
    bottom: 45%;
    left: 75%;
}

.sec_volume .profile_block:after {
    content: "";
    border-radius: 30px;
    background: #c9a444;
    mix-blend-mode: multiply;
    opacity: 0.3;
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: -15px;
    right: -15px;
    z-index: -1;
}

.sec_volume .profile_block .cont {
    padding: 50px;
    border-radius: 30px;
    background: #fff;
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
}

.sec_volume .profile_block .cont .col_left {
    width: 40%;
}

.sec_volume .profile_block .cont .col_right {
    width: 60%;
    padding-left: 3%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sec_volume .profile_block .cont .col_right .img {
    width: 35%;
    padding-right: 5%;
}

.sec_volume .profile_block .cont .col_right .info {
    width: calc(100% - 35%);
}

.sec_volume .profile_block .title {
    margin: 0 0 15px;
}

.sec_volume .profile_block .cont .col_left .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sec_volume .profile_block .cont .col_left .title .left {
    width: calc(100% - 140px);
}

.sec_volume .profile_block .cont .col_left .title .right .img {
    width: 130px;
    border-radius: 50%;
    overflow: hidden;
}

.sec_volume .profile_block .title .ttl_en {
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0;
    color: #c9a444;
    margin: 0 0 15px;
}

.sec_volume .profile_block .title .ttl_jp {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    line-height: 2;
}

.sec_volume .profile_block .title .ttl_jp .large {
    font-size: 180%;
    line-height: 1;
    display: inline-block;
    margin-right: 10px;
}

.sec_volume .profile_block .cont .col_right .title .ttl_jp .large {
    line-height: 1.6;
}

.sec_volume .profile_block .txt {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    font-weight: bold;
    line-height: 2.2;
}

.sec_volume .profile_block .txt .small {
    display: inline-block;
    font-size: 85%;
    line-height: 1.4;
}

.sec_volume .profile_block .social {
    position: relative;
    margin: 15px 0 0;
}

.sec_volume .profile_block .social_wrap {
    display: flex;
    column-gap: 20px;
}

.sec_volume .profile_block .social_link img {
    height: 30px;
    width: auto;
}

/*.sec_volume .chapter_block {
    width: 100%;
    max-width: 830px;
    margin: 0 auto;
}*/

.sec_volume .chapter_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.sec_volume .chapter_list .item {
    padding: 0 15px;
    width: calc(100%/3);
    margin: 0 0 40px;
}

.sec_volume .chapter_list .box {
    position: relative;
}

.sec_volume .chapter_list .box .pos_link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.sec_volume .chapter_list .box .img {
    margin: 0 0 10px;
    position: relative;
    /*aspect-ratio: 9/16;*/
    aspect-ratio: 16/9;
    overflow: hidden;
}

.sec_volume .chapter_list .box .img iframe {
    position: absolute;
    top: 52%;
    left: 52%;
    width: 100%;
    height: 100%;
    transform: scale(1.03) translate(-50%, -50%);
    z-index: 1;
}

.sec_volume .chapter_list .box .ttl {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.45;
    letter-spacing: 0.05em;
}

.sec_volume .chapter_list .box .ttl .large {
    font-size: 125%;
}

.sec_volume .chapter_list .box .txt {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 991px) {
    .sec_volume .chapter_list {
        padding: 0 15px;
    }

    .sec_volume .profile_block .cont .col_left {
        width: 100%;
        margin: 0 0 30px;
    }

    .sec_volume .profile_block .cont .col_right {
        width: 100%;
        padding-left: 0%;
    }
}

@media screen and (max-width: 767px) {
    .sec_volume {
        padding-bottom: 60px;
    }

    .sec_volume::before {
        height: 20px;
        top: 10px;
    }


    .sec_volume .sec_title .ttl_en {
        font-size: 1.8rem;
    }

    .sec_volume .sec_title .ttl_volume {
        width: 250px;
    }

    .sec_volume .sec_title .ttl_volume .icon02 {
        bottom: -20px;
        right: -60px;
    }

    .sec_volume .profile_block .cont {
        padding: 30px 15px;
    }

    .sec_volume .profile_block .cont .col_left .title {
        justify-content: space-between;
    }

    .sec_volume .profile_block .cont .col_left .title .right .img {
        width: 100px;
    }

    .sec_volume .profile_block .cont .col_left .title .left {
        width: calc(100% - 110px);
    }

    .sec_volume .profile_block .title .ttl_jp {
        font-size: 1rem;
        letter-spacing: 0.01em;
    }

    .sec_volume .profile_block .txt {
        font-size: 1.4rem;
        line-height: 1.7;
        margin-top: 15px;
    }

    .sec_volume .profile_block .title .ttl_en {
        font-size: 1.4rem;
        margin: 0 0 5px;
    }

    .sec_volume .profile_block .title {
        margin: 0;
    }

    .sec_volume .profile_block .cont .col_right .img {
        width: 35%;
        padding-right: 0;
        margin: 0 auto;
    }

    .sec_volume .profile_block .cont .col_right .info {
        width: 100%;
        padding-left: 0;
        margin: 15px 0 0;
        display: block;
    }

    .sec_volume .profile_block .title .ttl_jp .large {
        font-size: 150%;
    }

    .sec_volume .icon_profile {
        display: none;
    }

    .sec_volume .chapter_list .item {
        width: 100%;
        margin-bottom: 20px;
    }

    .sec_volume .chapter_list .box .ttl {
        font-size: 1.4rem;
        letter-spacing: 0;
    }

    .sec_volume .chapter_list .box .txt {
        font-size: 1.2rem;
        letter-spacing: -0.05em;
    }
}

/*フィーカカラー*/
.sec_volume.fika {
    background: #fdf1ed;
}

.sec_volume.fika::before {
    display: none;
}

.sec_volume.fika .sec_title .ttl_volume {
    width: 100%;
    max-width: 548px;
}

.sec_volume.fika .sec_title .ttl_volume .icon {
    width: 22.5%;
    position: absolute;
}

.sec_volume.fika .sec_title .ttl_volume .icon01 {
    top: -50px;
    left: -200px;
}

.sec_volume.fika .sec_title .ttl_volume .icon02 {
    bottom: -20px;
    right: -200px;
}


.sec_volume.fika .sec_title .ttl_en,
.sec_volume.fika .profile_block .title .ttl_en {
    color: #f09587;
}

.sec_volume.fika .profile_block:after {
    background: #f09587;
}

.sec_volume.fika .chapter_list {
    justify-content: center;
    max-width: 87.5%;
    margin: 0 auto;
}

.sec_volume.fika .chapter_list .box .img {
    aspect-ratio: 9 / 16;
}

@media screen and (max-width: 767px) {
    .sec_volume.fika .sec_title .ttl_volume {
        max-width: 200px;
    }

    .sec_volume.fika .sec_title .ttl_volume .icon {
        width: 45%;
    }

    .sec_volume.fika .sec_title .ttl_volume .icon01 {
        top: 0%;
        left: -45%;
    }

    .sec_volume.fika .sec_title .ttl_volume .icon02 {
        top: 20%;
        right: -90px;
    }

    .sec_volume.fika .chapter_list {
        max-width: 91.5%;
    }
}

/*==================================================================
	download
===================================================================*/

.sec_download {
    background: #b8b8b9;
    color: #ffffff;
    padding-bottom: 160px;
}

.sec_download.fika {
    background: #f6bfb7;
}

.sec_download .inner {
    position: relative;
    z-index: 0;
}

.sec_download .sec_title .ttl_en {
    color: #ffffff;
}

.sec_download .sec_btn .btn_style {
    background: #c9a444;
}

.sec_download.fika .sec_btn .btn_style {
    background: #f09587;
}

.sec_download .sec_btn .btn_style:after {
    border-color: #c9a444;
}

.sec_download.fika .sec_btn .btn_style:after {
    border-color: #f09587;
}

.sec_download .image {
    width: 100%;
    max-width: 970px;
    margin: 0 auto 30px;
    position: relative;
    z-index: 0;
}

.sec_download .icon_download {
    position: absolute;
    z-index: 1;
}

.sec_download .mix_blend {
    mix-blend-mode: lighten;
}

.sec_download .icon_download01 {
    width: 13.9%;
    max-width: 136px;
    top: 79%;
    right: 95%;
}

.sec_download .icon_download03 {
    width: 19.7%;
    max-width: 192px;
    bottom: 90%;
    left: 85%;
}

.sec_download .icon_download02 {
    width: 21.8%;
    max-width: 240px;
    bottom: 10%;
    left: calc((100vw - 1100px)/2 - 60px);
}

.sec_download .icon_download04 {
    width: 20%;
    max-width: 220px;
    top: 0;
    right: calc((100vw - 1100px)/2 - 90px);
}

@media screen and (max-width: 1280px) {
    .sec_download .icon_download04 {
        top: -15px;
        right: 0;
    }

    .sec_download .icon_download02 {
        left: 0;
    }
}

@media screen and (max-width: 767px) {
    .sec_download {
        padding-bottom: 40px;
    }

    .sec_download .mix_blend {
        display: none;
    }
}

.sec_instagram {
    background: #eebdbd;
}

.sec_instagram .sec_title .ttl_en {
    color: #bb5c7f;
}

.sec_instagram .sec_title .ttl_jp {
    margin: 0 0 15px;
}

.sec_instagram .sec_title .ttl_jp .icon_instagram {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    margin-right: 20px;
}

.sec_instagram .sec_btn .btn_style {
    background: #80445b;
}

.sec_instagram .sec_btn .btn_style:after {
    border-color: #80445b;
}

.sec_instagram .image {
    margin: 0 auto 50px;
}

@media screen and (max-width: 767px) {
    .sec_instagram .sec_title .ttl_jp .icon_instagram {
        width: 30px;
        margin-right: 10px;
    }
}


.sec_history {
    background-color: #fbf4ee;
    padding: 140px 0 80px;
    position: relative;
    height: 745px;
}

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

.history_head .sec_title .ttl_en {
    color: #44a4c4;
}

.history_head .sec_title .ttl_jp {
    line-height: 1.7;
}

.sec_history .img_obj {
    position: absolute;
    right: 50%;
    top: 2%;
    width: 200px;
    z-index: 2;
    transform: translateX(650px);
}

.historys_body {
    z-index: 1;
    position: absolute;
    top: 120px;
    right: 0;
    left: 0;
    max-width: 100%;
    height: 565px;
    margin: 0 auto;
}

.historys_list {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 565px;
    overflow: auto;
}

.historys_list .slick-list {
    padding-left: 440px !important;
}

.historys_item {
    padding: 0 20px;
    transition: opacity 0s 0s ease;
}

.historys_article {
    display: inline-block;
    flex-shrink: 0;
    width: 345px !important;
    height: 224px;
    margin: 320px 0 0;
    position: relative;
    transition: transform .6s ease-out;
}

.slick-current .historys_article {
    transform: translateY(-40px);
}

.slick-current~.slick-slide .historys_article {
    transform: translateX(130px);
}

.historys_article_inner {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 224px;
    display: block;
    position: relative;
    padding: 5px;
    border-radius: 10px;
}

.slick-current .historys_article_inner {
    position: absolute;
    display: block;
    width: 474px;
    height: 464px;
    padding: 20px;
    border-radius: 15px;
    transition: all .4s ease;
}

.historys_article_inner::before {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: inherit;
    background-color: #cdae5b;
    content: "";
    transition: width 260ms cubic-bezier(.18, .89, .32, 1.28), height 260ms cubic-bezier(.18, .89, .32, 1.28);
}

.historys_link {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

.history_inner {
    z-index: 2;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.history_img {
    position: relative;
    z-index: 0;
    line-height: 0;
}

.history_img img {
    border-radius: 10px;
    height: 220px;
    object-fit: cover;
    line-height: 0;
}

.slick-current .history_img img {
    height: 280px;
}

.history_ttl {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
    background-color: #cdae5b;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.slick-current .history_ttl {
    background-color: #fff;
    color: #cdae5b;
    position: relative;
    font-size: 2.0rem;
    margin-top: 20px;
    transition: font-size 250ms ease-out;
    letter-spacing: .09em;
}

.history_body {
    display: none;
}

.slick-current .history_body {
    display: block;
}

.history_more {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 20px 0;
    text-align: right;
}

.history_more span {
    background: url(../imgs/icon_plus.svg) no-repeat right center / 60px 60px;
    display: inline-block;
    padding: 20px 70px 20px 0;
}

.historys_list .slick-arrow {
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-indent: -999em;
    height: 60px;
    width: 60px;
    position: absolute;
    top: 170px;
    z-index: 10;
}

.historys_list .slick-prev {
    background-image: url(../imgs/icon_prev.svg);
    left: calc(50% - 30px);
}

.historys_list .slick-next {
    background-image: url(../imgs/icon_next.svg);
    left: calc(50% + 540px);
}

@media screen and (max-width: 1280px) {
    .sec_history {
        height: auto;
    }

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

    .historys_list .slick-list {
        padding-left: 20px !important;
    }

    .historys_list .slick-arrow {
        top: 200px;
    }

    .historys_list .slick-prev {
        left: 50%;
        transform: translateX(-310px);
    }

    .historys_list .slick-next {
        left: auto;
        right: 50%;
        transform: translateX(310px);
    }

    .slick-current~.slick-slide .historys_article {
        transform: translateX(0);
    }

    .historys_list {
        position: relative;
    }

    .history_head {
        position: relative;
        z-index: 1;
    }

    .historys_body {
        position: relative;
        height: auto;
        z-index: 0;
        top: 0;
    }

    .historys_item {
        padding: 0 50px;
    }

    .historys_article {
        width: 300px !important;
    }

    .slick-current .historys_article_inner {
        width: 450px;
        transform: translateX(-50%);
        left: 50%;
    }

    .slick-current .history_ttl {
        letter-spacing: -0.05em;
    }

    .sec_history .img_obj {
        top: 35%;
        width: 180px;
        transform: translateX(calc(100% + 150px));
    }
}

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

    .icon_history {
        display: none;
    }

    .history_head .img_obj {
        display: none;
    }

    .historys_article {
        width: 280px !important;
        margin: 145px 0 0;
    }

    .historys_item {
        padding: 0 10px;
    }

    .history_img img {
        height: 160px;
    }

    .slick-current .history_img img {
        height: 180px;
    }

    .slick-current .historys_article_inner {
        width: 300px;
        height: 320px;
        padding: 10px;
    }

    .historys_list .slick-arrow {
        height: 30px;
        width: 30px;
    }

    .historys_list .slick-prev {
        left: 3px;
        transform: translateX(0px);
    }

    .historys_list .slick-next {
        left: auto;
        right: 3px;
        transform: translateX(0px);
    }

    .slick-current .history_ttl {
        font-size: 1.4rem;
        margin-top: 15px;
        line-height: 1.2;
        padding: 8px;
    }

    .history_more {
        font-size: 1.4rem;
        letter-spacing: 0.1em;
        padding: 10px 0;
    }

    .history_more span {
        background-size: 40px 40px;
        display: inline-block;
        padding: 15px 50px 15px 0;
    }

    .historys_list {
        height: auto;
    }

    .sec_history .img_obj {
        top: 33%;
        width: 110px;
        transform: translateX(calc(100% + 70px));
    }
}

.historys_list .slick-dots {
    display: flex;
    gap: 4px;
    list-style: none;
    position: absolute;
    left: calc(50% + 150px);
    bottom: 20px;
}

.historys_list .slick-dots li button {
    background-color: #e8ebef;
    border: none;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    height: 10px;
    width: 10px;
    text-indent: -999em;
}

.historys_list .slick-dots li.slick-active button {
    background-color: #052e5a;
}

.icon_history {
    position: absolute;
    z-index: -1;
}

.icon_history01 {
    width: 8.2%;
    max-width: 92px;
    bottom: 50%;
    right: 110%;
}

.icon_history02 {
    width: 19.4%;
    max-width: 214px;
    bottom: -22%;
    right: 100%;
    animation-duration: 3s;
    animation-delay: 0.5s;
}

@media screen and (max-width: 1280px) {
    .historys_list .slick-dots {
        left: 50%;
        transform: translateX(-50%);
    }

    .icon_history01 {
        right: 75%;
    }

    .icon_history02 {
        right: 65%;
    }
}

.modal {
    background: #fff;
    margin: 0 auto;
    max-width: 1280px;
    width: calc(90% + 16px);
    padding: 60px 30px 25px;
    padding: 0;
    position: relative;
    z-index: 11;
}

.mfp-close-btn-in .mfp-close {
    background: url(../imgs/icon_close.svg) no-repeat 0 0 / 60px 60px;
    height: 60px;
    width: 60px;
    opacity: 1;
    position: absolute;
    right: 15px;
    top: 15px;
    text-indent: 9999px;
    overflow: hidden;
}

.modal_body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.modal_img {
    line-height: 0;
    width: 60%;
}

.modal_info {
    padding: 0 8%;
    width: 40%;
}

.modal_info .name {
    color: #44a4c4;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
}

.modal_info .name::first-letter {
    text-transform: uppercase;
}

.modal_info .text {
    color: #404040;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 2;
    margin-bottom: 10px;
    text-align: center;
}

.modal_info .date {
    font-size: 1.2rem;
    font-weight: bold;
}

.modal_info .notice {
    color: #FF4040;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2;
    letter-spacing: .2em;
    margin: 30px 0 0;
}

.modal_info .btn_style {
    background: #808080;
    padding: 22px;
    width: 280px;
}

.modal_info .btn_style:after {
    border: 1px solid #808080;
}

.modal_colors {
    background-color: #eaeaea;
    list-style: none;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 30px;
    padding: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 75px;
    gap: 20px;
}

.modal_colors .box_label {
    color: #44A3C3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

.modal_colors .box {
    flex: 1;
}

.modal_colors .color_row {
    display: flex;
}

.modal_colors .label {
    margin: 5px 15px 5px 0;
    min-width: 90px;
}

.modal_colors .color_list {
    flex: 1;
}

.modal_colors li {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 5px 15px 5px 0;
}

.modal_colors li span+span {
    margin-left: 5px;
}

@media screen and (min-width: 992px) {
    .col4 li {
        min-width: 20%;
        max-width: 25%;
    }
    #Vol21 .col4 li {
        min-width: calc(100% / 2 - 20px);
    }


    .col3 li {
        min-width: 100px;
        max-width: 33.33%;
    }

    #Vol01 .color_list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    #Vol02 .label {
        min-width: 145px;
    }

    #Vol02 .col3 li {
        min-width: 140px;
    }

    #Vol04 .label {
        min-width: 110px;
    }

    #Vol04 .col4 li {
        min-width: 130px;
    }

    #Vol04 .col4 li:last-child {
        min-width: unset;
    }

    #Vol07 .label {
        min-width: 125px;
    }

    #Vol07 .col3 li {
        min-width: 125px;
    }

    #Vol08 .label {
        min-width: 120px;
    }

    #Vol08 .col3 li {
        min-width: 150px;
    }

    #Vol08 .col3 li:last-child {
        min-width: 130px;
    }

    #Vol09 li {
        min-width: 145px;
    }

    #Vol10 li {
        min-width: calc(25% - 20px);
    }

    #Vol11 li {
        min-width: 80px;
    }

    #Vol12 .color_list {
        max-width: 475px;
    }

    #Vol14 li,
    #Vol13 li {
        min-width: 90px;
    }

    #Vol16 li {
        min-width: 120px;
    }

    #Vol17 .col3 li, #Vol19 .col3 li, #Vol20 .col3 li {
        min-width: 170px;
    }
}

.modal.special {
    max-width: 815px;
}

.modal.special .modal_body {
    padding: 60px 30px 25px;
}

.modal.special .modal_info {
    padding: 0 0 0 5%;
}

.modal.special .modal_info .text {
    text-align: left;
}

.modal.special .modal_img img {
    border: 5px solid #cdae5b;
    border-radius: 10px;
}

@media screen and (max-width: 1280px) {
    .modal_info {
        padding: 15px;
    }
}

@media screen and (max-width: 991px) {
    .modal_colors {
        padding: 15px;
    }

    .modal_info .text {
        line-height: 1.7;
    }

    .modal_info .btn_style {
        padding: 15px;
        width: 220px;
    }

    .modal_img {
        padding-right: 10px;
    }

    .modal_colors li {
        letter-spacing: 0;
    }
}

@media screen and (max-width: 767px) {
    .mfp-close-btn-in .mfp-close {
        background-size: 30px 30px;
        height: 30px;
        width: 30px;
        right: 5px;
        top: 5px;
    }

    .modal_info {
        width: 100%;
        margin: 0;
        text-align: center;
        padding: 20px 0 30px;
        order: 2;
    }

    .modal_info .name {
        font-size: 1.6rem;
        letter-spacing: 0.1em;
        margin-bottom: 7px;
    }

    .modal_info .text {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        margin-bottom: 7px;
    }

    .modal_img {
        width: 100%;
        padding-right: 0;
        order: 1;
    }

    .modal.special .modal_body {
        padding: 15px;
    }

    .modal.special .modal_info {
        padding: 15px 0;
    }

    .modal.special .modal_info .text {
        font-size: 1.6rem;
        text-align: center;
    }

    .modal_colors {
        padding: 10px 7px;
        margin-top: 0;
        font-size: 1rem;
        order: 3;
        gap: 10px;
        flex-direction: column;
    }

    .modal_colors .box_label {
        width: 100%;
        height: auto;
        border-radius: 3px;
        line-height: 2;
    }

    .modal_colors li {
        letter-spacing: -0.05em;
        margin-right: 8px;
    }

    .modal_colors .color_row {
        flex-wrap: wrap;
    }

    .modal_colors .label {
        min-width: unset;
        width: 100%;
    }
    #Vol21 .col4 .color_row:nth-of-type(1) .color_list li,
    #Vol21 .col4 .color_row:nth-of-type(2) .color_list li {
        min-width: calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
}

/*==================================================================
	ver2.0 クリエイティブカラー／フィーカカラー
===================================================================*/

.wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.sec_special {
    background: #e3d7ca;
    color: #404040;
}

.sec_special .inner {
    background: url(../imgs/bg_special.jpg) no-repeat;
    background-size: cover;
    max-width: 1280px;
    padding: 60px 40px;
    position: relative;
}

.sec_special .inner .icon {
    position: absolute;
    width: 10.5%;
    mix-blend-mode: multiply;
    opacity: .6;
}

.sec_special .inner .icon.icon01 {
    top: -2%;
    right: -3%;
}

.sec_special .inner .icon.icon02 {
    bottom: -2%;
    left: -2%;
}


.sec_special .sec_title .ttl_en {
    color: #caa23a;
}

.sec_special .sec_title .ttl_special {
    max-width: 520px;
    text-align: center;
    margin: 0 auto 30px;
}

.sec_special .sec_title .txt span {
    color: #c75e7c;
}


.sec_special .wrapper .photo {
    width: calc(100% - 43%);
}

.sec_special .wrapper:nth-of-type(3) .photo {
    order: 2;
}

.sec_special .wrapper div.txt {
    width: 43%;
    border-top: 4px solid #423936;
    border-bottom: 4px solid #423936;
    padding: 20px 0;
    position: relative;
}

.sec_special .wrapper div.txt .icon_special_01,
.sec_special .wrapper div.txt .icon_special_02 {
    position: absolute;
    width: 35%;
    top: 10px;
    right: 0;
}

.sec_special .wrapper div.txt .icon_special_02 {
    width: 120px;
}

.sec_special .wrapper div.txt:before,
.sec_special .wrapper div.txt::after {
    position: absolute;
    top: 0.3rem;
    left: 0rem;
    right: 0rem;
    border-bottom: 1px solid;
    content: '';
}

.sec_special .wrapper div.txt::after {
    top: 0;
    bottom: 0.3rem;
}

.sec_special .wrapper .name {
    font-size: 2rem;
    line-height: 1.45;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.sec_special .wrapper .spec {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 1.45;
    margin-bottom: 10px;
}

.sec_special .wrapper .spec dt {
    width: 12%;
}

.sec_special .wrapper .spec dd {
    width: calc(100% - 12%);
    text-indent: -0.75em;
    padding-left: 0.75em;
}

.sec_special .wrapper .spec dd::before {
    content: ":";
    font-size: .75em;
    margin: 0 5px;
}

.sec_special .wrapper .box_description {
    background: #fff;
    padding: 20px;
    box-shadow: 8px 8px 0px rgba(5, 99, 109, .3);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.sec_special .wrapper .box_description .ttl_description {
    text-align: center;
    color: #caa23a;
    margin-bottom: 5px;
    line-height: 1.45;
}

.sec_special .wrapper .box_description .wrapper {
    gap: 10px;
}

.sec_special .wrapper .box_description .wrapper .item:first-of-type {
    width: 8%;
}

.sec_special .wrapper .box_description .wrapper .item:nth-of-type(2) {
    width: 92%;
}

.sec_special .wrapper .box_description .txt_color {
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    background: #e3e1e1;
    color: #008cd6;
    -webkit-writing-mode: vertical-rl;
    padding: 15px 5px;
    border-radius: 11px;
}

.sec_special .wrapper .box_description .color_list {
    display: flex;
    margin-top: 2px;
    margin-bottom: 8px;
}

.sec_special .wrapper .box_description .color_list p {
    width: calc(100% / 3) !important;
    font-size: 1.2rem;
}

.sec_special .wrapper .box_description .color_list .color {
    background: #cb9369;
    border-radius: 50%;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.sec_special .wrapper .box_description .color_list .color.c_white {
    background: #fff;
    border: 2px solid #9e9e9f;
}

.sec_special .wrapper .box_description .color_list .color.c_gold {
    background: #caa23a;
}

.sec_special .wrapper .box_description .color_list .color.c_silver {
    background: #aaabab;
}

.sec_special .wrapper .box_description .color_list .color.c_shimmerpink {
    background: #d6a4b6;
}

.sec_special .wrapper .box_description .color_list .color.c_shimmerblue {
    background: #8d9bc1;
}

.sec_special .wrapper .box_description .color_list .color.c_shimmergreen {
    background: #79c38d;
}

.sec_special .sec_btn {
    margin: 40px 0 60px;
}

.sec_special .sec_btn:nth-of-type(2) {
    margin: 40px 0 0;
}

.sec_special .wrapper:nth-of-type(3) .box_description .ttl_description {
    color: #f09587;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list {
    flex-wrap: wrap;
    line-height: 1.75;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_captino {
    background: #d2aa87;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_mango {
    background: #ffcf9a;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_avocado {
    background: #b0ab72;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_nemophila {
    background: #a0bdbb;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_popy {
    background: #f69b89;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_plum {
    background: #d8b7ca;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_sesami {
    background: #dcd7d1;
}

.sec_special .wrapper:nth-of-type(3) .box_description .color_list .color.c_black {
    background: #231815;
}

@media screen and (max-width: 991px) {
    .sec_special .inner {
        padding: 40px 15px;
        margin: 0 15px;
    }

    .wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sec_special .wrapper .photo {
        width: 100%;
        margin-bottom: 10px;
    }

    .sec_special .wrapper:nth-of-type(3) {
        display: block;
    }

    .sec_special .wrapper div.txt {
        width: 100%;
    }

    .sec_special .wrapper .spec {
        font-size: 1.2rem;
    }

    .sec_special .wrapper .spec dt {
        width: 16%;
    }

    .sec_special .wrapper .spec dd {
        width: calc(100% - 16%);
    }

    .sec_special .wrapper .box_description .wrapper .item:first-of-type {
        width: 100%;
    }

    .sec_special .wrapper .box_description .wrapper .item p {
        margin-bottom: 5px;
    }

    .sec_special .wrapper .box_description .color_list {
        flex-wrap: wrap;
    }

    .sec_special .wrapper .box_description .txt_color {
        padding: 10px 5px;
        border-radius: 20px;
        text-align: center;
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .sec_special .sec_title .ttl_special {
        max-width: 250px;
    }

    .sec_special .wrapper .box_description .color_list p {
        width: calc(100% / 2) !important;
    }

    .sec_special .inner .icon {
        width: 17.5%;
    }

    .sec_special .inner .icon.icon01 {
        top: -0.5%;
    }

    .sec_special .inner .icon.icon02 {
        bottom: -0.5%;
    }

    .sec_special .sec_btn {
        margin: 20px 0 60px;
    }

    .sec_special .sec_btn:nth-of-type(2) {
        margin: 20px 0 40px;
    }
}

/*バックナンバー*/

.sec_backnumber {
    background: #e39292;
    color: #fff;
}

.sec_backnumber .sec_title .ttl_en {
    color: #fff;
}

.sec_backnumber .backnumber_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.sec_backnumber .backnumber_list .item {
    width: calc(100% / 3 - 30px);
}

.sec_backnumber .backnumber_list .box {
    background: #fff;
    color: #606060;
    padding: 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    position: relative;
}

.sec_backnumber .backnumber_list .box:after {
    content: "";
    border-radius: 30px;
    background: #7e4f4f;
    mix-blend-mode: multiply;
    opacity: 0.3;
    position: absolute;
    top: 15px;
    left: 15px;
    bottom: -15px;
    right: -15px;
    z-index: -1;
}

.sec_backnumber .backnumber_list .ttl {
    margin: 5px 0 15px;
    font-size: 1.4rem;
    line-height: 1.45;
}

.sec_backnumber .backnumber_list .ttl .large {
    font-size: 125%;
}

.sec_backnumber .sec_btn .btn_style {
    background: #91425b;
    margin-bottom: 20px;
    width: 100%;
}

.sec_backnumber .sec_btn .btn_style:after {
    border: 1px solid #91425b;
}

.sec_backnumber .sec_btn .btn_style span {
    display: inline-block;
    width: 30px;
    margin-left: 5px;
    vertical-align: middle;
}

.sec_backnumber .annotation {
    color: #ff0;
    font-size: clamp(1.65rem, 1.0073rem + 1.0356vw, 2.25rem);
    text-align: center;
    font-weight: 700;
    margin: 40px 0 0;
    letter-spacing: 0.1em;
    line-height: 1.45;
}

.sec_backnumber .annotation img{
    
    width: 65%;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .sec_backnumber .backnumber_list .item,.sec_backnumber .annotation img {
        width: 100%;
    }
}


.chapter_list .slick-dots {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0 auto 60px;
    bottom: 20px;
}

.chapter_list .slick-dots li button {
    background-color: #b8b8b9;
    border: none;
    border-radius: 5px;
    margin: 0;
    padding: 0;
    height: 10px;
    width: 10px;
    text-indent: -999em;
}

.chapter_list .slick-dots li.slick-active button {
    background-color: #caa23a;
}

.sec_volume.fika .chapter_list .slick-dots li.slick-active button {
    background-color: #f09587;
}

.frame_wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;/* 動画の比率　*/
    overflow: hidden;
}

.frame_wrap.active {
    padding-top: 177%;
}

.frame_wrap .arrow,
.frame_wrap .arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.frame_wrap .arrow {
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, .8);
    /* 矢印背景色　*/
    pointer-events: none;
}

.frame_wrap .arrow::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #222;
    /* 矢印色　*/
}

.frame_wrap img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.frame_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
Ver2.0更新内容
  */

/* セクション全体 */
.anniversary {
    background-color: #f8f9e9;
    background-image: url('../imgs/5th_icon.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    padding: 80px 15px;
    text-align: center;
}

/* コンテナ */
.anniversary .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ヘッダー */
.anniversary .header .title {
    max-width: 360px;
    text-align: center;
    margin: 0 auto 40px;
}

.anniversary .header .main-title {
    font-size: 3rem;
    color: #85784e;
    /* ゴールド風 */
    font-weight: bold;
}

.anniversary .header .description {
    font-size: 1.4rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* カード一覧コンテナ */
.anniversary .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* カード間の余白 */
    justify-content: space-between;
    /* 均等配置 */
}

/* カード */
.anniversary .card {
    flex: 1 1 calc(33.33% - 20px);
    /* カードを3等分 */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    /* コンテンツの高さを揃える */
    flex-direction: column;
    justify-content: space-between;
    /* 上下で揃える */
    padding: 20px;
    transition: transform 0.3s ease;
    position: relative;
    /* バッジの位置調整用 */
}

.anniversary .card:hover {
    transform: translateY(-5px);
}

/* バッジ */
.anniversary .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #d9534f;
    /* 赤系 */
    color: #fff;
    padding: 5px 10px;
    font-size: 1.4rem;
    border-radius: 5px;
    font-weight: bold;
    display: block;
    /* 常時表示 */
}

.anniversary .badge.limited {
    background-color: #85784e;
    /* ゴールド */
}

.anniversary .badge.new {
    background-color: #d9534f;
    /* 赤 */
}

/* カード画像 */
.anniversary .card-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* カードタイトル */
.anniversary .card-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.25;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.anniversary .card-title span {
    font-size: 80%;
}

/* カード説明 */
.anniversary .card-description {
    flex-grow: 1;
    /* 余ったスペースを埋める */
    display: flex;
    align-items: center;
    /* テキストを中央揃え */
    justify-content: center;
    margin-bottom: 20px;
    /* ボタンとの余白 */
    font-size: 1.4rem;
    color: #666;
    line-height: 1.45;
}

/* ボタン */
.anniversary .btn {
    display: block;
    /* インラインからブロック要素に変更 */
    width: 100%;
    /* カードの幅いっぱいに広げる */
    text-align: center;
    background-color: #85784e;
    /* ゴールド系 */
    color: #fff;
    padding: 15px 0;
    /* 上下の余白を増やす */
    border-radius: 45px;
    /* ボタンの角丸 */
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* ボタンの影 */
    transition: all 0.3s ease;
    /* スムーズなエフェクト */
}

/* ボタンホバー時 */
.anniversary .btn:hover {
    background-color: #6e6444;
    /* ダークゴールド */
    transform: translateY(-2px);
    /* 少し浮かび上がる効果 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    /* 強めの影 */
}

/* フォーカス時のアクセシビリティ対応 */
.anniversary .btn:focus {
    outline: 3px solid rgba(133, 120, 78, 0.5);
    /* ゴールド系のフォーカスリング */
    outline-offset: 3px;
}

@media screen and (max-width: 768px) {
    .anniversary .cards {
        flex-direction: column;
        align-items: center;
    }

    .anniversary .card {
        width: 100%;
        max-width: 350px;
    }
    .anniversary .header .title {
        max-width: 240px;
    }
}

/*
.revival-section
  */
.revival-section {
    background-color: #e5ebd2;
    padding: 80px 15px;
    text-align: center;
}

.revival-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ヘッダー */

.revival-section .sec_title .ttl_en {
    color: #a99d55;
}

.revival-section .main-title {
    width: 320px;
    margin: 0 auto;
}

.revival-section .subtitle {
    font-size: 1.4rem;
    color: #666;
}

/* メイン画像 */
.revival-section .main-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 40px;
}

/* 製品情報 */
.revival-section .product-info {
    background-color: #e8e8e8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
    z-index: 1;
    /* 白背景を上に保つ */
}

/* タイトル */
.revival-section .product-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 装飾アイコン */

.revival-section .decoration {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 装飾アイコン */
.revival-section .decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* 白背景の下に配置 */
    overflow: visible;
    /* アイコンが枠から飛び出せるように */
}

.revival-section .decoration {
    position: absolute;
    width: 70px;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    /* 背景の上に重ねる */
}

/* 各アイコンの配置 */
.revival-section .apple {
    top: -20px;
    right: -20px;
    /* 少し飛び出す */
}

.revival-section .chocolate {
    top: -20px;
    left: -20px;
    /* 少し飛び出す */
}

.revival-section .flower {
    bottom: 10px;
    left: -20px;
    /* 少し飛び出す */
}


.revival-section .bottle {
    bottom: 10px;
    right: -20px;
    /* 少し飛び出す */
}


/* ケーキの描き方 */

.revival-section .drawing-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.revival-section .drawing-steps .video img,
.revival-section .drawing-steps .steps img {
    width: 100%;
    border-radius: 10px;
}

.revival-section .drawing-steps .video {
    width: 38%;
}

.revival-section .drawing-steps .video iframe{
    aspect-ratio: 9 / 16;
 width: 100%;
 height: 100%;
}

.revival-section .drawing-steps .steps {
    width: 62%;
}

.revival-section .product-info {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 0 #e5e5b3;
    text-align: left;
    position: relative;
    margin-bottom: 60px;
}

/* 横並びのヘッダー */
.revival-section .product-header {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    /* 下部の余白 */
    max-width: 480px;
    margin: 0 auto;
}

.revival-section .product-title {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

.revival-section .vertical-line {
    width: 1px;
    background-color: #ccc;
    height: auto;
}

.revival-section .product-details {
    flex: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

.revival-section .product-details li {
    line-height: 1.5;
}

/* 説明文 */
.revival-section .description {
    font-size: 1.4rem;
    color: #85784e;
    margin: 20px 0;
    line-height: 1.6;
    text-align: center;
}

/* インクセクション全体 */
.revival-section .ink-section {
    display: flex;
    /* 並列に配置 */
    align-items: flex-start;
    /* 縦方向の揃え */
    justify-content: center;
    /* 水平方向の中央揃え */
    gap: 20px;
    /* タイトルとリストの間隔 */
    margin-top: 20px;
}

/* インク色の丸とタイトル */
.revival-section .ink-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    color: #44a3c3;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* インクカラーリスト */
.revival-section .ink-colors {
    display: grid;
    /* グリッドレイアウト */
    grid-template-columns: repeat(2, 1fr);
    /* 2列で並べる */
    gap: 10px;
    /* 各リスト項目の間隔 */
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    /* グリッド全体を水平中央揃え */
}

.revival-section .ink-colors li {
    display: flex;
    align-items: center;
    color: #333;
    line-height: 1.5;
    margin-top: 10px;
}

.revival-section .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
}

.revival-section .cake-drawing h3 img {
    max-width: 380px;
    margin: 0 auto 20px;
}

@media screen and (max-width: 767px) {
    .revival-section .product-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        width: 100%;
    }

    .revival-section .product-title {
        width: 100%;
        text-align: center;
    }

    .revival-section .product-details {
        width: 100%;
        text-align: left;
    }

    .revival-section .vertical-line {
        display: none;
    }

    .revival-section .ink-section {
        display: flex;
        flex-direction: column;
        /* 縦並び */
        gap: 15px;
        /* 各要素の間隔 */
        align-items: stretch;
        /* 横幅を親要素いっぱいに広げる */
        width: 100%;
        /* セクション全体の横幅 */
    }

    /* インク色の丸とタイトル */
    .revival-section .ink-title {
        width: 100%;
        /* 横幅目いっぱい */
        text-align: center;
        /* テキストを中央揃え */
        padding: 10px 0;
        /* 上下の余白 */
        border-radius: 0;
        height: 40px;
    }

    /* インクカラーリスト */
    .revival-section .ink-colors {
        display: grid;
        grid-template-columns: 1fr;
        /* 1列に並べる */
        gap: 10px;
        /* 各リストアイテムの間隔 */
        width: 100%;
        /* 横幅を目いっぱい */
    }

    .revival-section .ink-colors li {
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    .revival-section .color-dot {
        margin-right: 10px;
        /* テキストとの間隔 */
    }

    .revival-section .decoration {
        position: absolute;
        width: 50px;
        height: auto;
    }

    .revival-section .drawing-steps, .picnic-section .drawing-content {
        display: flex;
        flex-wrap: wrap;
    }
    .revival-section .drawing-steps  > div,
    .picnic-section .drawing-content > div{
        width: 100%!important;
        flex: none!important;
        
    }
}

/*
picnic
*/

.picnic-section {
    background-color: #d9eeee;
    /* 優しいブルーグリーン */
    padding: 80px 15px;
    text-align: center;
}

.picnic-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* セクションヘッダー */

.picnic-section .sec_title .ttl_en {
    color: #6dc3be;
}

.picnic-section .sec_title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.picnic-section .sec_title .title-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.picnic-section .sec_title .main-title {
    position: relative;
    z-index: 1;
    /* アイコンよりも前面に表示 */
    max-width: 230px;
    margin: 0 auto;
}

.picnic-section .sec_title .icon-left,
.picnic-section .sec_title .icon-right {
    position: absolute;
    top: 50%;
    /* 高さを中央に揃える */
    transform: translateY(-50%);
    /* 中央揃えを補正 */
    width: 150px;
    /* アイコンのサイズを調整 */
    height: auto;
}

.picnic-section .sec_title .icon-left {
    left: -250px;
    /* 左の配置を調整 */
    width: 250px;
    top: 30%;
    /* 高さを中央に揃える */
    transform: translateY(-30%);
    /* 中央揃えを補正 */
}

.picnic-section .sec_title .icon-right {
    right: -170px;
    /* 右の配置を調整 */
    top: 70%;
    /* 高さを中央に揃える */
    transform: translateY(-70%);
    /* 中央揃えを補正 */
}



/* メイン画像 */
.picnic-section .main-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 40px;
}

/* 製品情報 */
.picnic-section .product-info {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 0 #e5e5b3;
    text-align: left;
    position: relative;
}

.picnic-section .product-header {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;/* 下部の余白 */
    max-width: 660px;
    margin: 0 auto;
}

.picnic-section .product-title {
    width: 260px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    line-height: 1.45;
}

.picnic-section .vertical-line {
    width: 1px;
    background-color: #ccc;
}

.picnic-section .product-details {
    width: calc(100% - 260px);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

.picnic-section .product-details li {
    line-height: 1.45;
}




/* インクセクション */
.picnic-section .ink-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* ink-title と ink-colors の間隔 */
    margin-top: 20px;
    /* 必要に応じて調整 */
}

.picnic-section .ink-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #fff;
    /* ピクニック風ブルー */
    color: #44a3c3;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin: 0;
    /* 不要な余白をリセット */
}

.picnic-section .ink-colors {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* 各アイテム間の均等な間隔 */
    list-style: none;
    padding: 0;
    margin: 0;
    /* 不要な余白をリセット */
}

.picnic-section .ink-colors li {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    line-height: 1.5;
    white-space: nowrap;
    /* テキストを1行にする */
}

.picnic-section .color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
}

/* 描き方セクション */
.picnic-section .drawing-section {
    margin-top: 40px;
    text-align: center;
}

.picnic-section .drawing-section h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #1a6f5b;
    margin-bottom: 20px;
}

.picnic-section .drawing-content {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.picnic-section .drawing-content .video img,
.picnic-section .drawing-content .steps img {
    width: 100%;
    border-radius: 10px;
}

.picnic-section .drawing-content .video {
    width: 38%;
}

.picnic-section .drawing-content .video iframe{
    aspect-ratio: 9 / 16;
    width: 100%;
    height: 100%;
   }

.picnic-section .drawing-content .steps {
    width: 62%;
}

.picnic-section .product-info img {
    position: absolute;
    z-index: 1;
    width: 60px;
    /* 必要に応じてサイズ調整 */
    height: auto;
}

.picnic-section .product-info .icon-top-left {
    top: -20px;
    left: -20px;
}

.picnic-section .product-info .icon-top-right {
    top: -20px;
    right: -20px;
}

.picnic-section .product-info .icon-bottom-left {
    bottom: -20px;
    left: -20px;
    width: 80px;
}

.picnic-section .product-info .icon-bottom-right {
    bottom: -20px;
    right: -20px;
}

.picnic-section .drawing-section h3 img {
    max-width: 380px;
    margin: 0 auto 20px;
}

@media screen and (max-width: 767px) {
    .picnic-section {
        padding: 40px 15px;
        /* モバイル用のパディング */
        text-align: center;
        /* セクション全体の中央寄せ */
    }

    .picnic-section .sec_title .main-title {
        position: relative;
        z-index: 1;
        max-width: 160px;
        margin: 0 auto;
    }

    .picnic-section .sec_title .icon-left,
    .picnic-section .sec_title .icon-right {
        width: 80px;
        height: auto;
    }

    .picnic-section .sec_title .icon-left {
        width: 100px;
        left: -100px;
    }

    .picnic-section .sec_title .icon-right {
        right: -90px;
    }

    .picnic-section .main-image img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 20px;
        /* メイン画像の間隔 */
    }

    .picnic-section .product-info {
        padding: 20px;
        /* 製品情報セクションのパディング */
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* 影の調整 */
    }

    .picnic-section .product-header {
        flex-direction: column;
        /* モバイルでは縦並びに */
        align-items: stretch;
        gap: 15px;
    }

    .picnic-section .product-title {
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }

    .picnic-section .product-details {
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: left;
        width: 100%;
    }

    .picnic-section .product-info img {
        width: 40px;
    }

    .picnic-section .product-info .icon-bottom-left {
        width: 60px;
    }

    .picnic-section .ink-section {
        padding: 20px 0;
        /* 全体の余白を調整 */
        flex-wrap: wrap;
    }

    .picnic-section .ink-section .ink-title {
        width: 100%;
        /* 横幅いっぱいに広げる */
        text-align: center;
        /* タイトルを中央揃え */
        font-size: 1.4rem;
        /* タイトルのフォントサイズ */
        border-radius: 0;
        height: 40px;
    }

    .picnic-section .ink-section .ink-colors {
        display: flex;
        flex-wrap: wrap;/* 横並びで折り返し */
        justify-content: space-between;/* 均等配置 */
        gap: 10px;/* 各リスト間の隙間 */
        margin-top: 15px;/* 上部の余白 */
        width: 100%;
        /* 横幅いっぱい */
    }

    .picnic-section .ink-section .ink-colors li {
        width: calc(50% - 5px);
        /* 2列構成にする（隙間を調整） */
        display: flex;
        align-items: center;
        /* 内容を縦中央揃え */
    }

    .picnic-section .color-dot {
        margin-right: 10px;
    }

    .revival-section .cake-drawing h3 img,
    .picnic-section .drawing-section h3 img {
        max-width: 240px;
        margin: 0 auto 20px;
    }

}

/*
jelly
*/

.jelly-section {
    background-image: url(../imgs/bg_jerry.jpg);
    padding: 80px 15px;
    text-align: center;
}

.jelly-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* セクションヘッダー */

.jelly-section .sec_title .ttl_en {
    color: #6dc3be;
}

.jelly-section .sec_title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}




.jelly-section .sec_title .title-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.jelly-section .sec_title .main-title {
    position: relative;
    z-index: 1;
    /* アイコンよりも前面に表示 */
    max-width: 320px;
    margin: 0 auto;
}

.jelly-section .sec_title .icon-left{
    position: absolute;
    top: 50%;/* 高さを中央に揃える */
    left: -140px;
    transform: translateY(-50%);/* 中央揃えを補正 */
    width: 120px;/* アイコンのサイズを調整 */
    height: auto;
}

/* メイン画像 */
.jelly-section .main-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 40px;
}


/* 製品情報 */
.jelly-section .product-info {
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 0 #e5e5b3;
    text-align: left;
    position: relative;
}

.jelly-section .product-header {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    /* 下部の余白 */
    max-width: 640px;
    margin: 0 auto;
}

.jelly-section .product-title {
    flex: 1;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    line-height: 1.45;
}

.jelly-section .vertical-line {
    width: 1px;
    background-color: #ccc;
}

.jelly-section .product-details {
    flex: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

.jelly-section .product-details li {
    line-height: 1.45;
}


/* 説明文 */
 .description {
    font-size: 1.4rem;
    color: #85784e;
    margin: 20px 0;
    line-height: 1.6;
    text-align: center;
}

/* インクセクション */
.jelly-section .ink-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* セクション全体を中央揃え */
    margin-top: 20px;
    gap: 20px;
    /* 各要素の間隔 */
}

/* 横並びレイアウト */
.jelly-section .ink-row {
    display: flex;
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    gap: 40px;
    /* 各グループ間の間隔 */
}

/* 軸色タイトル */
.jelly-section .ink-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #fff;
    color: #44a3c3;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin: 0;
    /* 不要な余白をリセット */
}

/* インクラベル（黒インク入、リフィルなし） */
.jelly-section .ink-group .ink-label {
    font-size: 1rem;
    color: #666;
    margin-bottom: 5px;
}

/* インクカラム内の色リスト */
.jelly-section .ink-colors {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* 横並び */
    gap: 15px;
    /* 各色間の間隔 */
}

/* 色リストアイテム */
.jelly-section .ink-colors li {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
}

/* カラードット */
.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    /* テキストとの間隔 */
    display: inline-block;
}



/* 描き方セクション */
.jelly-section .drawing-section {
    margin-top: 40px;
    text-align: center;
}

.jelly-section .drawing-section h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #73adde;
    margin: 60px 0 20px;
    line-height: 1.45;
}

.jelly-section .drawing-content {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.jelly-section .drawing-content .video img,
.jelly-section .drawing-content .steps img {
    width: 100%;
    border-radius: 10px;
}

.jelly-section .drawing-content .video {
    flex: 1;
}

.jelly-section .drawing-content .steps {
    flex: 1;
}

.jelly-section .product-info img {
    position: absolute;
    z-index: 1;
    width: 60px;
    /* 必要に応じてサイズ調整 */
    height: auto;
}

.jelly-section .product-info .icon-top-left {
    top: -20px;
    left: -20px;
}

.jelly-section .product-info .icon-top-right {
    top: -20px;
    right: -20px;
}

.jelly-section .product-info .icon-bottom-left {
    bottom: -20px;
    left: -20px;
}

.jelly-section .product-info .icon-bottom-right {
    bottom: -20px;
    right: -20px;
}

.jelly-section .drawing-section h3 img {
    max-width: 380px;
    margin: 0 auto 20px;
}

.jelly-section .drawing-section .note,
.jelly-section .drawing-section .note+ul {
    text-align: left;
}

.jelly-section .drawing-section .note+ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 5px;
}

@media screen and (max-width: 767px) {
    .jelly-section {
        padding: 40px 15px;
        text-align: center;
    }

    .jelly-section .sec_title .main-title {
        max-width: 200px;
    }
    
    .jelly-section .sec_title .icon-left{
        left: -70px;
        width: 60px;
    }
    

    .jelly-section .main-image img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .jelly-section .product-info {
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
    }

    .jelly-section .product-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .jelly-section .product-title {
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
    }

    .jelly-section .product-details {
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: left;
    }

    .jelly-section .product-info img {
        width: 40px;
    }

    .jelly-section .ink-section {
        padding: 20px 0;
        flex-wrap: wrap;
    }

    .jelly-section .ink-section .ink-title {
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
        border-radius: 0;
        height: 40px;
    }

    .jelly-section .ink-row {
        flex-wrap: wrap;
        gap: 20px;
    }

    .jelly-section .ink-row .ink-group {
        width: 100%;
    }

    .jelly-section .ink-section .ink-colors li {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .jelly-section .color-dot {
        margin-right: 10px;
    }

    .jelly-section .drawing-section h3 {
        font-size: 1.6rem;
    }

    .jelly-section .drawing-section .note+ul {
        gap:10px;
    }
}

.cookie-text__02{
    color: #FF4040;
    font-weight: bold;
}