/*
     Theme Name: zikozero
     Template: swell
    */

/* 親テーマリセット     */
.l-topTitleArea{
    display: none;
}
#body_wrap{
    background: none;
}
.l-content{
    max-width: inherit;
    padding-left: inherit;
    padding-right: inherit;  
}
.l-content{
    padding-top: 0;
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

@font-face {
    src: url(../font/GennokakuGothic-Bold.otf) format(opentype);
    font-family: "GennokakuGothic-Bold";
}
@font-face {
    src: url(../font/GennokakuGothic-Medium.otf) format(opentype);
    font-family: "GennokakuGothic-Medium";
}
@font-face {
    src: url(../font/GennokakuGothic-Regular.otf) format(opentype);
    font-family: "GennokakuGothic-Regular";
}
@font-face {
    src: url(../font/din-condensed-bold.otf) format(opentype);
    font-family: "din-condensed-bold";
}
:root{
    --font-GennokakuGothic-Bold: "GennokakuGothic-Bold", sans-serif;
    --font-GennokakuGothic-Medium: "GennokakuGothic-Medium", sans-serif;
    --font-GennokakuGothic-Regular: "GennokakuGothic-Regular", sans-serif;
    --color-main: #47A364;
    --color-bg: rgb(209 228 205 / 0.5);
    --color-text: #251E1C;
    --color-line: #F7E900;
  }

body,a,p,h1,h2{
  font-style: normal;
  text-decoration: none;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
img{
  width: 100%;
  max-width: 100%;
  height: auto;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
/* アニメーション */
.slideup{
    opacity: 0;
}
.slideup.active{
    animation: slideup;
    animation-duration: 0.6s;
    animation-timing-function: ease;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    will-change: transform;
}
@keyframes slideup{
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.slideleft{
    transform: translateX(-100%);
}
.slideleft.active{
    animation: slideleft;
    animation-duration:1.4s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    will-change: transform;
}
@keyframes slideleft{
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.slideright{
    transform: translateX(100%);
}
.slideright.active{
    animation: slideright;
    animation-duration: 1.4s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    will-change: transform;
}
@keyframes slideright{
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
.fade{
    opacity: 0;
}
.fade.active{
    animation: fade;
    animation-duration: 0.1s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    will-change: opacity;
}
@keyframes fade{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 共通-------------------- */
.line{
    background: linear-gradient(transparent 80%, #F7E900 80%, #F7E900 90%, transparent 90%);
}
/* wrapper---------------- */
.wrapper{
    margin-bottom: 10%;
    background: #FEFEFF;
}
/* mv ------------------- */
.mv{
    position: relative;
    margin-top: 0.25vw;
    overflow: hidden;
}
.mv .photo-box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
    "photo_01 photo_02 photo_03 photo_04"
    ". . photo_05 photo_06"
    ". . photo_07 photo_08"
    "photo_09 photo_10 photo_11 photo_12";
    gap: 0.5vw;
    width: 104vw;
    margin-left: -2vw;
}
.photo._01 { grid-area: photo_01; }
.photo._02 { grid-area: photo_02; }
.photo._03 { grid-area: photo_03; }
.photo._04 { grid-area: photo_04; }
.photo._05 { grid-area: photo_05; }
.photo._06 { grid-area: photo_06; }
.photo._07 { grid-area: photo_07; }
.photo._08 { grid-area: photo_08; }
.photo._09 { grid-area: photo_09; }
.photo._10 { grid-area: photo_10; }
.photo._11 { grid-area: photo_11; }
.photo._12 { grid-area: photo_12; }
.mv .photo-box .photo:nth-child(1),
.mv .photo-box .photo:nth-child(4),
.mv .photo-box .photo:nth-child(10){
    animation-delay: 0s;
}
.mv .photo-box .photo:nth-child(3),
.mv .photo-box .photo:nth-child(7),
.mv .photo-box .photo:nth-child(12){
    animation-delay: 0.2s;
}
.mv .photo-box .photo:nth-child(2),
.mv .photo-box .photo:nth-child(6),
.mv .photo-box .photo:nth-child(9){
    animation-delay: 0.4s;
}
.mv .photo-box .photo:nth-child(5),
.mv .photo-box .photo:nth-child(8),
.mv .photo-box .photo:nth-child(11){
    animation-delay: 0.6s;
}
.mv .title{
    position: absolute;
    top: 34%;
    left: 11%;
    width: calc(592.1966 / 1920 * 100%);
    animation-duration: 0.6s;
    animation-delay: 0.4s;
}
.mv .text{
    position: absolute;
    top: 37%;
    right: 17.15%;
    width: calc(223.9712 / 1920 * 100%);
    animation-duration: 1s;
    animation-delay: 1.2s;
}
/* worry ------------------- */
.worry{
    position: relative;
    margin-top: 0.5vw;
    padding-top: 5%;
}
.worry .bg{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 87%;
    background: var(--color-bg);
    clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0% 82%);
}
.worry .title{
    position: relative;
    width: fit-content;
    margin-inline: auto;
    padding: 0.1em 1.2em;
    border-radius: 1em;
    color: #fff;
    background: var(--color-main);
    font-family: var(--font-GennokakuGothic-Bold);
    font-size: calc(40 / 1920 * 100vw);
    letter-spacing: 0.17em;
}
.worry .photo-box{
    position: relative;
}
.worry .photo{
    width: calc(945.2059 / 1920 * 100%);
    margin: 4% auto 0;
}
.worry .text{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(405.1573 / 1920 * 100%);
    aspect-ratio: 405.1573 / 131.6108;
    background: #fff;
    border-radius: 0.2em;
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-GennokakuGothic-Medium);
    font-size: calc(33.6 / 1920 * 100vw);
    line-height: calc(47.04 / 33.6);
}
.worry .text._01{
    top: 5%;
    left: 16%;
}
.worry .text._02{
    top: 5%;
    right: 17%;
}
.worry .text._03{
    top: 40%;
    left: 10.25%;
}
.worry .text._04{
    top: 40%;
    right: 10.5%;
}
.worry .text._05{
    top: 72%;
    left: 15.75%;
}
.worry .text._06{
    top: 72%;
    right: 16.5%;
}
.worry .icon{
    position: absolute;
    top: 0;
    right: 0;
}
.worry .arrow{
    position: relative;
    right: 0.5%;
    width: calc(91.3187 / 1920 * 100%);
    margin: 0 auto;
}
.worry .arrow._01{
    margin-top: 14%;
}
.worry .arrow._02{
    animation-delay: 0.4s;
}
/* point ------------------- */
.point{
    position: relative;
    margin-top: 6%;
}
.point .maintitle{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.point .text01{
    width: calc(376.962 / 1920 * 100%);
}
.point .text02{
    margin: 0 0.3em 0 0.5em;
    color: var(--color-text);
    font-family: var(--font-GennokakuGothic-Bold);
    font-size: calc(39.4129 / 1920 * 100vw);
}
.point .text03{
    color: var(--color-main);
    font-family: var(--font-GennokakuGothic-Bold);
    font-size: calc(59.1193 / 1920 * 100vw);
    line-height: calc(78.8258 / 59.1193);
}
.point .detail{
    position: relative;
    margin-top: 0.5vw;
    padding: 8% 0;
    background: var(--color-bg);
    overflow: hidden;
}
.point .detail._01{
    margin-top: 8%;
}
.point .detail .inner{
    position: relative;
}
.point .detail._01 .inner,
.point .detail._03 .inner{
    left: 10%;
}
.point .detail._02 .inner{
    right: 10%;
}
.point .detail .bg{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 17% 0, 8% 100%, 0% 100%);
    background-color: rgba(234, 243, 232, 1);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(71, 163, 100, 0.37) 3px, rgba(71, 163, 100, 0.37) 6px );
    animation-delay: 0s;
}
.point .detail._02 .bg{
    clip-path: polygon(92% 0, 100% 0, 100% 100%, 83% 100%);
}
.point .detail .number{
    position: absolute;
    top: 54%;
    left: 6%;
    translate: 0 -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-main);
    font-family: "din-condensed-bold", sans-serif;
    font-size: calc(600 / 1920 * 100vw);
    text-transform: uppercase;
    line-height: 1.2;
    animation-delay: 0.6s;
}
.point .detail._02 .number{
    left: auto;
    right: 6%;
}
.point .detail .number::before{
    content: "point";
    margin-bottom: -1em;
    font-size: calc(40.9057 / 1920 * 100vw);
}
.point .detail .title{
    position: relative;
    left: 2%;
    color: var(--color-main);
    text-align: center;
    font-family: var(--font-GennokakuGothic-Bold);
    font-size: calc(45 / 1920 * 100vw);
    line-height: calc(68.7456 / 45);
}
.point .detail .text{
    position: relative;
    left: 2%;
    width: calc(982.6861 / 1920 * 100%);
    margin: 1em auto 0;
    color: var(--color-text);
    text-align: justify;
    font-family: var(--font-GennokakuGothic-Regular);
    font-size: calc(25 / 1920 * 100vw);
    line-height: calc(47.148 / 25);
    letter-spacing: 0.07em;
}
.point .detail .photo-box{
    display: flex;
    justify-content: space-between;
    width: calc(1302.018 / 1920 * 100%);
    margin: 4% auto 0;
}
.point .detail .photo-box .photo{
    width: calc(628.4963 / 1302.018 * 100%);
    animation-delay: 0.3s;
}
/* detailmovie------- */
.detailmovie{
    margin-top: 8%;
}
.detailmovie .title{
    color: var(--color-main);
    text-align: center;
    font-family: var(--font-GennokakuGothic-Bold);
    font-size: calc(50 / 1920 * 100vw);
}
.detailmovie .video-box{
    width: calc(1328.7329 / 1920 * 100%);
    margin: 3% auto 0;
}
.detailmovie .video-box video{
    width: 100%;
}
@media screen and (max-width: 959px){
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    /* アニメーション---------- */
    @keyframes zoomin{
        0% {
            opacity: 1;
            transform: scale(1.2);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    .wrapper{
        margin-bottom: 20%;
    }
    /* mv----------------- */
    .mv .photo-box{
        grid-template-columns: repeat(3, 1fr); /* 3列 */
        grid-template-rows: repeat(5, 1fr);    /* 5行 */
        grid-template-areas:
        "photo_01 photo_02 photo_03"
        ". . photo_04"
        ". . photo_05"
        "photo_06 photo_07 photo_08"
        "photo_09 photo_10 photo_11";
    }
    .mv .photo-box .photo._12{
        display: none;
    }
    .mv .photo-box .photo:nth-child(1),
    .mv .photo-box .photo:nth-child(6),
    .mv .photo-box .photo:nth-child(10){
        animation-delay: 0s;
    }
    .mv .photo-box .photo:nth-child(3),
    .mv .photo-box .photo:nth-child(8),
    .mv .photo-box .photo:nth-child(12){
        animation-delay: 0.2s;
    }
    .mv .photo-box .photo:nth-child(2),
    .mv .photo-box .photo:nth-child(4),
    .mv .photo-box .photo:nth-child(7){
        animation-delay: 0.4s;
    }
    .mv .photo-box .photo:nth-child(5),
    .mv .photo-box .photo:nth-child(9),
    .mv .photo-box .photo:nth-child(11){
        animation-delay: 0.6s;
    }
    .mv .title{
        top: 28%;
        left: 14%;
        width: 40%;
    }
    .mv .text{
        top: 53%;
        width: 22%;
        animation-delay: 0.8s;
    }
    /* worry-------------- */
    .worry{
        margin-top: 1%;
        padding-top: 12%;
        overflow: hidden;
    }
    .worry .bg{
        height: 91%;
        clip-path: polygon(0 0, 100% 0%, 100% 93.5%, 50% 100%, 0% 93.5%);
    }
    .worry .title{
        padding: 0.3em 1.2em;
        font-size: calc(41 / 959 * 100vw);
    }
    .worry .photo{
        width: 80%;
        margin-top: 8%;
    }
    .worry .text-box{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
        width: 90%;
        margin: 6% auto 0;
    }
    .worry .text{
        width: 100%;
        aspect-ratio: 3 / 1;
        font-size: calc(32 / 959 * 100vw);
    }
    .worry .text._01,
    .worry .text._02,
    .worry .text._03,
    .worry .text._04,
    .worry .text._05,
    .worry .text._06{
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }
    .worry .icon{
        top: 45%;
        left: 50.75%;
        translate: -50% 0;
        width: 160%;
        max-width: inherit;
    }    
    .worry .arrow{
        width: 10%;
    }
    .worry .arrow._01{
        margin-top: 44%;
    }
    /* point-------------- */
    .point{
        margin-top: 12%;
    }
    .point .maintitle{
        position: relative;
        flex-direction: column;
        align-items: center;
    }
    .point .text01{
        position: relative;
        width: 34%;
        right: 0.5em;
    }
    .point .text02{
        position: absolute;
        top: 27%;
        left: 66%;
        margin: 0.5em 0;
        font-size: calc(42 / 959 * 100vw);
    }
    .point .text03{
        margin-top: 0.8em;
        text-align: center;
        font-size: calc(50 / 959 * 100vw);
        line-height: 1.6;
    }
    .point .detail{
        margin-top: 1%;
        padding: 10% 0 14%;
    }
    .point .detail .bg{
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(71, 163, 100, 0.17) 2px, rgba(71, 163, 100, 0.17) 4px);
        clip-path: polygon(0 0, 27% 0, 8% 100%, 0% 100%);
    }
    .point .detail._02 .bg{
        clip-path: polygon(92% 0, 100% 0, 100% 100%, 73% 100%);
    }
    .point .detail .number,
    .point .detail._02 .number{
        position: relative;
        top: auto;
        left:auto;
        right: auto;
        translate: 0 0;
        font-size: calc(240 / 959 * 100vw);
        animation-delay: 0s;
    }
    .point .detail .number::before{
        margin-bottom: -0.5em;
        font-size: calc(34 / 959 * 100vw);
    }
    .point .detail._01 .inner, .point .detail._03 .inner{
        left: auto;
    }
    .point .detail._02 .inner{
        right: auto;
    }
    .point .detail .title{
        left: auto;
        margin-top: 0;
        font-size: calc(48 / 959 * 100vw);
        line-height: 1.8;
    }
    .point .detail .text{
        left: auto;
        width: 80%;
        font-size: calc(35 / 959 * 100vw);
        line-height: 1.6;
    }
    .point .detail .photo-box{
        width: 90%;
        margin-top: 8%;
    }
    /* detailmovie----------- */
    .detailmovie{
        margin-top: 12%;
    }
    .detailmovie .title{
        font-size: calc(46 / 959 * 100vw);
    }
    .detailmovie .video-box{
        width: 80%;
        margin-top: 6%;
    }
   
}



/* ワードプレス埋め込み後消去 */
.header-img, .footer-img{
    width: 100%;
}