/* 共通 */
html{
    font-size: 62.5%;
    margin: 0;
    scroll-behavior: smooth;
}
body{
    font-size: 1.6rem;
    line-height: 1.75;
	letter-spacing: 0.05em;
    color: #333333;
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    vertical-align:top;
}
.link a {
    color: #000;
    text-decoration: none;
    display: block;
}
ul, ol {
    list-style: none;
    padding-left: 0;
}
dd {
    margin-left: 0;
}

.whole-container {
    background-color: #00AFDD;
}
.pc-menu-container {
    display: none;
}
.movie {
    position: relative;
    width:90%;
    height:0;
    padding-top: 56.25%;
}
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* load画面 */
#otsukimi-load-container{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #00AFDD;
    text-align: center;
}
#otsukimi-load-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.pyonpyon {
    animation: pyonpyon 0.9s linear 0s infinite;
  }
  @keyframes pyonpyon {
    0%   { transform: translate(0%, 0%); }
    15%  { transform: translate(0%, 0%); }
    40%  { transform: translate(0%, 5%); }
    50%  { transform: translate(0%, 0%); }
    60%  { transform: translate(0%, -15%); }
    75%  { transform: translate(0%, -10%); }
    85%  { transform: translate(0%, 5%); }
    100% { transform: translate(0%, 0%); }
  }
#otsukimi-load-inner .load-image01 {
    width: 48%;
}
#otsukimi-load-inner .load-image02 {
    width: 38%;
    animation-delay: 0.5s;
}


/* 雲（ふわふわ） */

@keyframes fuwafuwa {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
}

.anime-fuwafuwa {
animation: 4s fuwafuwa infinite;
}
.anime-fuwafuwa02 {
animation: 2s fuwafuwa infinite;
}

.bg-cloud01, .bg-cloud02, .bg-cloud03 {
    display: none;
}

/* ポップアップ */

@keyframes pop-up {
    0% {
      transform: translateY(40px) scale(0.8);
      opacity: 0;
    }
    100% {
      transform: translateY(0) scale(1.0);
    }
    80%, 100% {
      opacity: 1;
    }
}
@keyframes zoom-in{
    0% {
        transform: scale(0.6);
        opacity: 1;;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;;
    }
    100% {
        transform: scale(1.0);
        opacity: 1;;
    }
}
.pop-up {
    animation-name: pop-up;
    animation-duration: 0.6s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.zoom-in {
    animation-name: zoom-in;
    animation-duration: 0.4s;
    animation-delay: 4.6s;
    animation-fill-mode: forwards;
    opacity: 0;
}



/* フェードイン */

.fade-in {
    opacity: 0;
}
.scroll-in {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

.delay-time02 {
    animation-delay: 0.2s;
}
.delay-time04 {
    animation-delay: 0.4s;
}
.delay-time06 {
    animation-delay: 0.6s;
}

/* main-container */
.main-container {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 8px 0px 7px -7px rgb(0 0 0 / 40%), -8px 0px 7px -7px rgb(0 0 0 / 40%);
    position: relative;
    z-index: 10;
}
.bg-color01 {
    background-color: #00AFDD;
}


/* header */
.header-inner {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-inner .header-logo {
    width: 180px;
    padding: 0 20px;
}

/*----- hamburger -----*/
.hamburger {
    display: block;
    position: fixed;
    z-index: 5;
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    background: #003d6c;
    color: #fefefe;
    border-radius: 50%;
}

.hamburger span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 10px;
    background: #fefefe;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 16px;
}
.hamburger span:nth-child(2) {
    top: 24px;
}
.hamburger span:nth-child(3) {
    top: 32px;
}

.hamburger.active span:nth-child(1) {
    top : 24px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2){
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    top: 24px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}

nav.globalMenuSp {
    display: block;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    color: #fefefe;
    background:#00AFDD;
    text-align: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    overflow-x: auto;
}
.globalMenuSp .deco-cloud {
    position: absolute;
    width: 25%;
    min-width: 145px;
}
.globalMenuSp .deco-cloud01 {
    top: 5%;
    right: 5%;
}
.globalMenuSp .deco-cloud02 {
    top: 13%;
    left: 0;
}
.globalMenuSp .deco-cloud03 {
    min-width: 60px;
    width: 10%;
    top: 55%;
    right: 0;
}
.globalMenuSp .deco-cloud04 {
    top: 85%;
    left: 15%;
}
nav.globalMenuSp a{
    color: #fefefe;
}
nav.globalMenuSp ul {
    padding: 0;
    width: 100%;
}
nav.globalMenuSp ul li{
    width: 250px;
    margin: 0 auto;
    padding-bottom: 30px;
    font-size: 18px;
}
nav.globalMenuSp.active {
    opacity: 100;
    visibility: visible;
}
.globalMenuSp-wrapper{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.globalMenuSp-menu .mobile-top-button {
    width: 180px;
    margin: 0 auto;
    padding-bottom: 50px;
    z-index: 5;
}


.top-area {
    position: relative;
    z-index: 1;
}
.top-text {
    width: 30%;
    margin: 30px auto 240px;
}
.top-images-inner {
    position: absolute;
}
.top-images .image01 {
    top: 195%;
}
.top-images .image02 {
    top: 135%;
}
.top-images .image03 {
    z-index: 1;
    width: 10%;
    top: 310%;
    right: 23%;
}
.top-images .image04 {
    width: 75%;
    top: 305%;
    left: 13%;
}
.top-images .image05 {
    left: 13%;
    top: 630%;
    width: 75%;
}


h2 {
    font-size: 2.9rem;
    line-height: 1.5;
    margin: 0;
}

.anime-slide-right, .anime-slide-left {
    opacity: 0;
}
.scroll-in2 {
    animation-name: slide-in-right;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}
.scroll-in3 {
    animation-name: slide-in-left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slide-in-left {
    0% {
    opacity: 0;
    transform: translateX(-15px);
    }
    100% {
    opacity: 1;
    transform: translateX(0);
    }
}

.first-container {
    padding: 48vh 0 0;
    position: relative;
}
.first-container .deco-image01, .first-container .deco-image02 {
    position: absolute;
}
.first-container .deco-image01 {
    width: 20%;
    top: 25%;
    right: 0;
    z-index: 1;
}
.completion-photo-box {
    position: relative;
}
.completion-inner {
    position: absolute;
}
.completion-photo-box .completion-text {
    width: 50%;
    top: -20px;
    left: 15%;
    z-index: 1;
}
.completion-photo-box .deco-image01 {
    width: 20%;
    top: 25px;
    right: 0;
}
.completion-photo {
    width: 90%;
    margin: 0 auto;
}
.completion-photo img {
    border-radius: 15px;
}
.completion-photo-box .deco-image-addition {
    width: 18%;
    bottom: 40px;
    left: 0;
}
.completion-photo-box .rabbit-addition {
    width: 22%;
    bottom: -10px;
    right: 3%;
}

.speech-bubble-box {
    display: flex;
    justify-content: center;
    padding-top: 75px;
}
.speech-bubble-box-inner {
    width: 18%;
    padding: 0 5px;
}
.speech-bubble-box-inner01 {
    padding-top: 25px;
}
.speech-bubble-box-inner02 {
    padding-bottom: 25px;
}
.speech-bubble-box-inner03 {
    padding-top: 25px;
}
.speech-bubble-box-inner04 {
    padding-top: 10px;
}
.first-container h2 {
    width: 75%;
    margin: 0 auto;
    padding: 25px 0;
}
.first-container-text {
    width: 80%;
    margin: 15px auto;
}
.first-container .movie {
    margin: 50px auto;
}

.note {
    width: 80%;
    margin: 0 auto;
    transform: translate(0,10px);
}

.otsukimi-bannerArea{
    margin: 50px auto;
    width: 90%;
}
.otsukimi-bannerArea img{
    border: solid 1px #fefefe;
}

.bg-color02 {
    background-color: #F0E900;
}
.recipe-container {
    padding: 65px 0;
}
.recipe-top-text {
    margin: 0 auto;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.recipe-top-text01 {
    width: 80%;
}
.recipe-top-text01 .inner01 {
    width: 55%;
    padding-left: 3%;
}
.recipe-top-text01 .inner02 {
    width: 30%;
    padding-right: 3%;
}

@keyframes kakukaku {
    0%, 100% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}
.anime-kakukaku {
    animation: kakukaku 1.5s steps(1) infinite;
}

/* 工程スライド */

.procedure-slider {
    width: 85%;
    margin: 0 auto;
}
.procedure-slider li img {
    box-sizing: border-box;
    padding: 0 10px;
}
.slick-arrow:before{
	content:""!important;
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;
}
.slick-dots li {
    display:inline-block;
	margin:0 8px;
    width: 15px;
    height: 15px;
}
.slick-dots li button::before {
    content: "";
}
.slick-dots li button {
    color: #fff;
    background-color: #fff;
    width:15px;/*ドットボタンのサイズ*/
    height:15px;/*ドットボタンのサイズ*/
}
.slick-dots button {
    color: transparent;
    outline: none;
    display:block;
    border-radius:50%;
}
.slick-dots .slick-active button{
    background:#00AFDD;/*ドットボタンの現在地表示の色*/
    color: #00AFDD;
}
.slick-dots {
    position: absolute;
    bottom: -40px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.recipe-top-text02 {
    width: 80%;
    position: relative;
}
.recipe-top-text02 .inner01 {
    width: 52%;
}
.recipe-top-text02 .inner02 {
    width: 40%;
}
.recipe-top-text02 .inner02 .speech-bubble-complete {
    position: absolute;
    width: 30%;
    left: 37%;
    top: -25px;
}
.recipe-container .movie {
    margin: 20px auto 0;
}


.sec-container {
    padding: 55px 0 20px;
}
.sec-inner {
    padding-bottom: 65px;
}
.sec-container .sec-inner h3 {
    width: 30%;
    margin: 0 auto 20px;
}
.sec-container .sec-inner .kit-image {
    width: 90%;
    margin: 0 auto;
}
.sec-container .sec-inner .kit-image, .sec-container .sec-inner .faq-list {
    position: relative;
    z-index: 1;
}
.sec-container .sec01 .kit-note {
    width: 85%;
    box-sizing: border-box;
    margin: 30px auto 15px;
    border: #ff6517 solid 2px;
    border-radius: 10px;
    padding: 20px 30px;
    background-color: #fff;
    color: #FF6517;
    font-weight: 500;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 1.3rem;
}
.sec-container .sec01 .kit-note dt {
    text-align: center;
    padding-bottom: 5px;
    font-size: 1.5rem;
}


.sec02 .hashtag {
    width: 50%;
    margin: 0 auto 5px;
}
.instagram-slider {
    margin: 0;
}
.instagram-slider li img {
    box-sizing: border-box;
    padding: 8px;
    border-radius: 15px;
}
.sec02 .slider02 li {
    transform: translateX(-80px);
}
.instagram-icon {
    width: 30%;
    margin: -45px auto 0;
    position: relative;
}


.faq-container {
    width: 90%;
    margin: 0 auto;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 500;
}
.faq-list dt, .faq-list dd {
    padding: 10px 45px;
    border-radius: 10px;
    margin: 10px 0;
}
.faq-list .question {
    background-color: #E5F7FC;
    cursor: pointer;
    position: relative;
    background-image: url(./img/otsukimi-kit/faq-plus.png);
    background-size: 15px;
    background-position: right 25px center;
    background-repeat: no-repeat;
}
.faq-list .question::before {
    position: absolute;
    display: block;
    content: "Q";
    top: 10px;
    left: 25px;
    color: #00AFDD;
}
.question.open {
    background-image: url(./img/otsukimi-kit/faq-minus.png);
}
.faq-list .answer {
    background-color: #FCFBCC;
    display: none;
    position: relative;
}
.faq-list .answer::before {
    position: absolute;
    display: block;
    content: "A";
    top: 10px;
    left: 25px;
    color: #FF6517;
}
.faq-list .answer .faq-color01 {
    color: #FF6517;
}
/* .faq-list .answer .marker {
    background:linear-gradient(transparent 60%, #fffb1d 60%);
} */
.faq-list .answer a {
    color: #333;
}


.store-container {
    position: relative;
    padding: 90px 0 300px;
    color: #fff;
    text-align: center;
}
.store-container .store-moon-image {
    position: absolute;
    width: 40%;
    position: absolute;
    top: -3%;
    left: 10%;
}
.store-container h3 {
    width: 32%;
    margin: 30px auto;
}

.store-container ul {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
}
.store-container ul li {
    width: 47%;
}

.store-container .kit-photo-text, .store-container .kit-photo, .purchase-button {
    width: 85%;
}
.store-container .kit-photo-text {
    margin: 60px auto 0;
    padding-bottom: 10px;
}
.store-container .kit-photo {
    margin: 20px auto;
}
.store-container .kit-photo img {
    border-radius: 15px;
}
.purchase-button {
    margin: 0 auto;
}
.purchase-button a {
    padding: 10px 0;
}
.rabbit02 {
    width: 70%;
    position: absolute;
    right: 10%;
    bottom: 50px;
}


.footer-container, .footer-container .link a {
    color: #003d6c;
    margin: 0;
    line-height: 2;
    font-weight: 500;
}

/*--------------*/
/*  Information
/*--------------*/

.information {
    padding: 64px 0;
    background: #fefefe;
}
.contentTitle {
    text-align: center;
    font-size: 2.24rem;
    line-height: 1.6;
    margin-bottom: 16px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    text-transform: uppercase;
}
.contentWrapper {
    margin: 0px auto;
    width: 90%;
}
.information .contentWrapper {
    display: block;
}
.information-textArea {
    width: 100%;
    padding-bottom: 24px;
}
.information-textArea p {
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}
.shippori {
    font-family: 'Shippori Mincho', serif;
}
.information-contact {
    width: 100%;
    text-align: center;
}
.information-contact ul {
    margin: 0;
}
.information-contact span {
    position: relative;
    font-size: 2.24rem;
    padding-left: 40px;
    transition: all 0.4s;
    font-family: 'Shippori Mincho', serif;
}
.information-contact span::before {
    content: "";
    position: absolute;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 34px;
    height: 34px;
    top: 0;
    left: 0;
}
.information-contact .information-tel span::before {
    background-image: url(img/tel.png);
}
.information-contact .information-contact span::before {
    background-image: url(img/mail.png);
}
.information-contact li:first-of-type {
    padding-bottom: 8px;
}
.information-contact li a:hover {
    opacity: 0.8;
}

/*--------------*/
/*  footer
/*--------------*/

footer {
    padding: 80px 0 20px;
    font-size: 1.4rem;
}
.grayBg {
    background: #f4f4f4;
}
footer a:hover {
    opacity: 0.6;
}
footer .contentWrapper {
    padding-bottom: 56px;
}
.footerInformation {
    width: 100%;
    padding-bottom: 32px;
}
.footerInformation img {
    width: 66%;
    max-width: 400px;
}
.footerInformation-company {
    margin-top: 16px;
}
.footerInformation-company h4 {
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    text-transform: uppercase;
}
.footerInformation-company ul {
    margin: 0;
}
.footerInformation-company li {
    font-size: 1.6rem;
}
.footerInformation-company li span {
    font-size: 1.4rem;
    padding-right: 12px;
}
.company-telFax {
    display: inline-block;
    padding-right: 12px;
}
.footerInformation-company .company-telFax span {
    padding-right: 0;
}
.footerInformation-company .company-telFax a {
    transition: all 0.4s;
    font-weight: 700;
    display: initial;
}
.footerMenu {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.footerMenu ul {
    width: 48%;
    position: relative;
    margin: 0;
}
.footerMenu ul:first-of-type::before {
    content: "";
    position: absolute;
    background: #e73828;
    height: 100%;
    width: 2px;
    top: 0;
    left: -10px;
}
.footerMenu li {
    padding-bottom: 8px;
}
.footerMenu li:last-of-type {
    padding-bottom: 0;
}
.footer-container .footerMenu li a {
    transition: all 0.4s;
    font-weight: 700;
    font-family: 'Shippori Mincho', serif;
}
footer small {
    display: block;
    font-weight: 700;
    text-align: center;
    font-size: 1.02rem;
}


@media (min-width: 900px) {

    .bg-cloud01, .bg-cloud02, .bg-cloud03 {
        display: block;
        position: fixed;
    }
    .bg-cloud01 {
        top: 200px;
        left: 120px;
    }
    .bg-cloud02 {
        top: 500px;
        left: 0;
    }
    .bg-cloud03 {
        top: 450px;
        right: 70px;
    }


    }
    
    @media (min-width: 1200px) {
        .whole-container {
            display: flex;
            justify-content: space-around;
        }


        .bg-cloud01, .bg-cloud02, .bg-cloud03 {
            display: block;
            position: fixed;
        }
        .bg-cloud01 {
            top: 100px;
            left: 50%;
        }
        .bg-cloud02 {
            top: 300px;
            left: 0;
        }
        .bg-cloud03 {
            top: 450px;
            right: 45%;
        }

        
        .pc-menu-container {
            display: block;
            width: 50%;
        }
        .pc-menu {
            position: fixed;
            min-width: 550px;
            width: 35%;
            top: 50%;
            left: 17%;
            transform: translate(-17%,-50%);
        }
        .pc-menu .top-button {
            width: 70%;
            margin: 0 auto;
            padding-bottom: 30px;
        }
        .pc-menu ul {
            display: flex;
            justify-content: space-between;
            gap: min(8px);
        }
        .pc-menu ul li {
            width: 31%;
        }

        
        .hamburger, .globalMenuSp {
            display: none;
        }

        .main-container {
            display: block;
            width: 40%;
        }
        
        .sec-container .sec01 .kit-note {
            font-size: 1.5rem;
        }
        .sec-container .sec01 .kit-note dt {
            font-size: 1.7rem;
        }

        .store-container ul {
            width: 80%;
            gap: 15px;
        }
        .store-container ul li {
            width: 48%;
        }
        
        .store-container .kit-photo-text, .store-container .kit-photo, .purchase-button {
            width: 80%;
        }
    }


/*--------------*/
/*  理学療法士コメントページ
/*--------------*/
.cr-KV{
    margin: min(7vw,34px);
    display: flex;
    flex-direction: column;
    gap: min(8vw, 32px);
}

.cr-intro{
    margin: min(18vw,60px) min(4vw,36px) min(27vw,160px);
}

.cr-container{
    position: relative;
    z-index: 1;
    padding: 0px 0 min(38vw,150px);
}
.cr-container.bg-color01::before{
    position: absolute;
    content: "";
    background: url(img/otsukimi-kit/bgTop-blue.svg) no-repeat center;
    background-size: 100%;
    width: 100%;
    height: min(22vw, 100px);
    top: -14vw;
    left: 0;
    z-index: -1;
}
.cr-container.bg-color02::before{
    position: absolute;
    content: "";
    background: url(img/otsukimi-kit/bgTop-yellow.svg) no-repeat center;
    background-size: 100%;
    width: 100%;
    height: min(22vw, 100px);
    top: -15%;
    left: 0;
    z-index: -1;
}

/*----- faq -----*/
.cr-introduction_main{
    display: flex;
    align-items: center;
    margin: min(8vw,36px) min(12vw,50px);
    gap: min(4vw,20px);
    position: relative;
}

.cr-deco.-deco1{
    width: min(65px, 14vw);
    left: 0;
    top: min(210px, 44vw);
}
.cr-deco.-deco2{
    width: min(115px,25vw);
    right: 0;
    top: min(20px,2vw);
}
.cr-deco.-deco3{
    width: min(95px, 25vw);
    right: 0;
    bottom: min(22vw, 86px);
}

.-introduction_main__image,
.-introduction_main__textArea{
    width: 50%;
    color: #fefefe;
}

.-introduction_main__image{
    position: relative;
}
img.cr-introduction_deco{
    position: absolute;
    width: min(15vw, 72px);
    left: -16%;
}

.-introduction_main__textArea span{
    font-size: min(1.3rem,2.4vw);
    letter-spacing: 0;
}
.-introduction_main__textArea>p.cr-introduction_name{
    margin: 0;
    font-size: min(2.24rem, 5vw);
    letter-spacing: .14em;
}
.-introduction_main__textArea>p.cr-introduction_name span{
    font-size: min(1.6rem, 4vw);
}

.cr-introduction_text{
    color: #fefefe;
    margin:0 min(12vw,50px);
}
.cr-introduction_text p{
    margin: 0;
    padding-bottom: min(2vw, 12px);
    font-size: min(1.6rem, 3.6vw);
}
.cr-introduction_text a{
    color: #fefefe;
    text-decoration: underline;
    font-size: min(1.6rem, 3.6vw);
}

.cr-accordion{
    margin-top: min(14vw, 62px);
}

ul.cr-accordion_links{
    display: flex;
    flex-wrap: wrap;
    gap: min(3vw,12px);
    margin: 0 min(12vw,50px) min(14vw, 62px);
}

ul.cr-accordion_links>li{
    width: calc((100% - min(3vw,12px)) / 2);
}
ul.cr-accordion_links>li a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fefefe;
    border: solid 2px #F0E900;
    border-radius: min(2vw,12px);
    position: relative;
    height: min(35vw, 190px);
    gap: min(2vw, 12px);
    transition: ease .5s;
}

ul.cr-accordion_links>li a img:nth-of-type(1){
    display: block;
    height: min(23vw,11rem);
    width: auto;
}
ul.cr-accordion_links>li a img:nth-of-type(2){
    display: block;
    width: min(4vw, 23px);
}

.cr-ec{
    margin:min(16vw,60px) min(12vw,50px) 0;
    color: #fefefe;
}

.cr-ec h2{
    margin-bottom: min(16px, 6vw);
}
.cr-ec h2 img{
    display: block;
}

.cr-ec>.kit-photo{
margin: min(6vw,24px) 0;
}
.cr-ec>.kit-photo img{
    border-radius: min(2vw,12px);
}

.cr-ec p{
    margin: 0;
    font-size: min(1.6rem, 3.6vw);
}

.cr-ec p.purchase-button{
    display: block;
    margin: 0 auto;
    width: 100%;
}

/*----- アコーディオン -----*/
.accordion-item {
    clear: both;
    width: 100%;
    padding: 0;
    background: #fefefe;
    border-radius: min(2vw,12px);
    color: #00AFDD;
    font-size: min(1.6rem, 3.6vw);
}

.accordion-item dt {
    padding: min(16px,3vw);
    color: #00AFDD;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0;
    position: relative;
    font-size: min(2rem, 4.24vw);
}
.accordion-item dt::before,
.accordion-item dt::after{
    content: "";
    position: absolute;
    background: #00AFDD;
    width: 2px;
    height: min(20px, 5vw);
    transition: ease .5s;
}
.accordion-item dt::before{
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}
.accordion-item dt::after{
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.accordion-item dt.active::after {
    transform: translateY(-50%) rotate(0deg);
}


.accordion-item dd {
    width: 100%;
    box-sizing: border-box;
    padding: min(18px, 3vw);
    margin: 0;
}

.accordion-item .movie{
    width: 100%;
    margin-bottom: min(4vw,18px);
}

.cr-accordion_contents{
    background: #e5f7fc;
    border-radius: min(2vw, 12px);
    padding: min(4vw, 18px) min(3vw, 16px);
    margin-bottom: min(4vw, 18px);
}

.cr-accordion_contents h3{
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: min(1.4vw, 12px);
    margin: 0 0 min(4vw, 14px) 0;
}
.cr-accordion_contents h3 span.number{
    background: #00AFDD;
    color: #fefefe;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(8vw, 42px);
    height: min(8vw, 42px);
}

.cr-accordion_contents p{
    margin: 0;
}

.cr-dango{
    width: min(28px, 6vw);
    margin: min(4vw, 16px) auto;
    display: block;
    animation: a-katakata steps(1) 6s infinite;
}

@keyframes a-katakata {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    10% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    20% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    30% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    40% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}

.cr-accordion_wrapper{
    margin:0 min(8vw,36px);
}

/*----- instagram -----*/
.cr-container.bg-color02{
    position: relative;
    color: #00AFDD;
    padding: min(5vw, 32px) 0;
}

.cr-instagram{
    margin: 0 min(12vw,50px) min(16vw,60px);
}

.cr-instagram h2{
    width: min(190px, 50vw);
    margin: 0 auto min(16px, 6vw);
}

.cr-instagram p{
    font-size: min(1.6rem, 3.6vw);
    margin: 0;
}

.cr-instagram_links{
    margin-top: min(12vw,50px);
}
.cr-instagram_links>h3{
    width: min(46vw,190px);
    margin: 0 auto min(4vw, 12px);
}
.cr-instagram_links>h3 img{
    display: block;
}

.cr-instagram_links>a{
    width: min(32vw, 140px);
    display: block;
    margin: 0 auto;
}

.cr-deco{
    position: absolute;
}
.cr-deco.-deco_dango{
    bottom: 0;
    right: 6%;
    width: min(82px, 20vw);
}
.cr-deco.-deco_insta{
    top: -31%;
    left: 50%;
    transform: translateX(-50%);
    width: min(172px, 40vw);
}

@media screen and (min-width:768px) {
    .cr-container.bg-color01::before{
        top: -64px;
    }

    ul.cr-accordion_links>li a:hover{
        transform: scale(1.04);
    }

    .otsukimi-bannerArea a:hover{
        opacity: .8;
    }
}


/*--------------*/
/*  匠の米粉
/*--------------*/

/* common */

.takuminoko-whole-container {
    background-color: #a47c00;
}

.takuminoko-pcMenu, .takuminoko-pcSlide {
    display: none;
}

/* loading */

.takuminoko-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 20;
    animation: tnk-loading 2s forwards;
    animation-delay: 0.2s;
}

@keyframes tnk-loading {

    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }

}

.takuminoko-main-container {
    max-width: initial;
    width: 100%;
}

@media screen and (min-width:769px) {

    .takuminoko-main-container {
        width: 43%;
        margin: 0 0 0 auto;
        border-left: 1px solid #fff;
        box-shadow: initial;
    }

    /* pcSlide */

    .takuminoko-pcSlide {
        display: block;
        width: 57%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }

    ul.pcSlide-list  {
        width: 100%;
        height: 100vh;
        margin: 0;
    }

    .slick-list, .slick-track {
        height: 100%;
    }

    .pcSlide-listItem {
        height: 100%;
        position: relative;
    }

    /* .pcSlide-listItem::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #3e3a39;
        opacity: 0.1;
        position: absolute;
        top: 0;
        left: 0;
    } */

    .pcSlide-listItem:nth-of-type(1) {
        background: url(./img/takuminoko/pcSlide-listItem-image01.jpg) center center no-repeat;
        background-size: cover;
    }

    .pcSlide-listItem:nth-of-type(2) {
        background: url(./img/takuminoko/pcSlide-listItem-image02.jpg) center center no-repeat;
        background-size: cover;
    }

    .pcSlide-listItem:nth-of-type(3) {
        background: url(./img/takuminoko/pcSlide-listItem-image03.jpg) center center no-repeat;
        background-size: cover;
    }

    /* ↓ここから動き */

    .add-animation {
        animation: zoomOut 15s linear 0s normal both;
    }

    @keyframes zoomOut {
        0% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1); /* 拡大率 */
        }
    }

    /* ↑ここまで動き */

}

@media screen and (min-width:480px) {

    .takuminoko-main-container {
        border-right: 1px solid #fff;
    }

}

@media screen and (min-width:1200px) {

    .takuminoko-whole-container {
        display: block;
    }

    .takuminoko-main-container {
        display: block;
        max-width: initial;
        width: 30%;
        margin: 0 16% 0 auto;
    }

    /* pc-menu */

    .takuminoko-pcMenu {
        display: block;
        width: 16%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
    }

    .takuminoko-pcMenu-inner {
        width: 80%;
        height: 100%;
        margin: 50px auto;
        position: relative;
        opacity: 0;
        animation-name: tnk-blurAnime;
        animation-duration: 1.8s;
        animation-fill-mode: forwards;
        animation-delay: 1.3s;
    }

    @keyframes tnk-blurAnime {

        0% {
            filter: blur(10px);
            transform: scale(1.02);
            opacity: 0;
        }

        100% {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .takuminoko-pcMenu-inner h1.pcMenu-logo, 
    .takuminoko-pcMenu-inner ul.pcMenu-list, p.pcMenu-storeButton {
        margin: 0;
    }

    .takuminoko-pcMenu-inner h1.pcMenu-logo {
        line-height: 1;
        margin-top: 50px;
    }

    .takuminoko-pcMenu-inner ul.pcMenu-list {
        margin-top: 40px;
    }

    .takuminoko-pcMenu-inner ul.pcMenu-list li {
        margin-top: 20px;
    }

    .takuminoko-pcMenu-inner ul.pcMenu-list li a {
        padding-left: 1.8em;
        font-family: 'Shippori Mincho', serif;
        font-size: 1.8rem;
        color: #fff;
        text-decoration: none;
        position: relative;
        transition: 0.4s;
    }

    .takuminoko-pcMenu-inner ul.pcMenu-list li a:hover {
        opacity: 0.5;
    }

    .takuminoko-pcMenu-inner ul.pcMenu-list li a::before {
        content: "";
        display: block;
        width: 1em;
        height: 1px;
        background-color: #fff;
        position: absolute;
        top: 50%;
    }

    .takuminoko-pcMenu-inner p.pcMenu-storeButton {
        position: absolute;
        width: 100%;
        bottom: 100px;
    }

    .takuminoko-pcMenu-inner p.pcMenu-storeButton a {
        display: block;
        width: 100%;
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 15px 0;
        text-align: center;
        color: #fff;
        text-decoration: none;
        line-height: 1;
        transition: 0.4s;
    }

    .takuminoko-pcMenu-inner p.pcMenu-storeButton a:hover {
        color: #a47c00;
        background-color: #fff;
    }

    /* pcSlide */

    .takuminoko-pcSlide {
        width: 54%;
    }

}

/* -----------------------
header
(匠の米粉、から揚げ粉(共通)) 
----------------------- */

.takuminoko-header, 
.karaageko-header {
    position: fixed;
    z-index: 1;
    width: 100%;
    background-color: initial;
}

.takuminoko-header .header-inner, 
.karaageko-header .header-inner {
    height: 60px;
}

.takuminoko-header .header-logo, 
.karaageko-header .header-logo {
    width: 160px;
}

.takuminoko-header .hamburger, 
.karaageko-header .hamburger {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 0;
}

.takuminoko-header .hamburger span, 
.karaageko-header .hamburger span {
    left: 15px;
}

.takuminoko-header .hamburger span, 
.karaageko-header .hamburger span {
    left: 15px;
}

.takuminoko-header .hamburger span:nth-child(1), 
.karaageko-header .hamburger span:nth-child(1) {
    top: 20px;
}

.takuminoko-header .hamburger span:nth-child(2), 
.karaageko-header .hamburger span:nth-child(2) {
    top: 30px;
}

.takuminoko-header .hamburger span:nth-child(3), 
.karaageko-header .hamburger span:nth-child(3) {
    top: 40px;
}

.takuminoko-header .hamburger.active span:nth-child(1), 
.takuminoko-header .hamburger.active span:nth-child(3), 
.karaageko-header .hamburger.active span:nth-child(1), 
.karaageko-header .hamburger.active span:nth-child(3) {
    top: 30px;
}

/* header */

.takuminoko-header {
    background-color: #fff;
}

.takuminoko-header .hamburger {
    background-color: #a47c00;
}

/* -----------------------
globalMenuSp
(匠の米粉、から揚げ粉(共通)) 
----------------------- */

nav.takuminoko-globalMenuSp, 
nav.karaageko-globalMenuSp {
    left: initial;
    right: 0;
}

ul.tnk-gMenu-list li a, 
ul.karaageko-gMenu-list li a, 
p.pcMenu-storeButton a {
    font-family: 'Shippori Mincho', serif;
    text-decoration: initial;
}

/* globalMenuSp */

nav.takuminoko-globalMenuSp {
    background-color: #a47c00;
}

nav.takuminoko-globalMenuSp .globalMenuSp-wrapper {
    width: 80%;
}

ul.tnk-gMenu-list {
    margin: 0;
}

nav.takuminoko-globalMenuSp ul li {
    width: fit-content;
    margin: 0 auto 40px;
    padding: 0 0 0;
    font-size: 2rem;
    line-height: 1;
}

nav.takuminoko-globalMenuSp.active ul li {
    animation-name: tnkTitle-fadeIn-slide;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

nav.takuminoko-globalMenuSp.active ul li:nth-of-type(2) {
    animation-delay: 0.3s;
}

nav.takuminoko-globalMenuSp.active ul li:nth-of-type(3) {
    animation-delay: 0.4s;
}

nav.takuminoko-globalMenuSp.active ul li:nth-of-type(4) {
    animation-delay: 0.5s;
}

@keyframes tnkTitle-fadeIn-slide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
  
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav.takuminoko-globalMenuSp .tnk-gMenu-subTitle {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

p.pcMenu-storeButton {
    margin: 0;
}

nav.takuminoko-globalMenuSp.active p.pcMenu-storeButton {
    animation-name: tnkTitle-fadeIn-slide;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

p.pcMenu-storeButton a {
    display: block;
    margin-bottom: 40px;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 15px 0;
}

nav.takuminoko-globalMenuSp.active p.pcMenu-homeButton {
    animation-name: tnkTitle-fadeIn-slide;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
    opacity: 0;
}

p.pcMenu-homeButton a {
    font-family: 'Shippori Mincho', serif;
    text-decoration: initial;
    font-size: 1.4rem;
    background: url(./img/takuminoko/gMenu-link-arrow.png) right center no-repeat;
    background-size: 1.4em;
    padding-right: 1.6em;
}

@media screen and (min-width:769px) {

    .takuminoko-header {
        width: 43%;
    }

    nav.takuminoko-globalMenuSp {
        width: 43%;
    }

}

@media screen and (min-width:1200px) {

    .takuminoko-header {
        display: none;
    }

}

/* main */

.takuminokomeko-main {
    padding-top: 60px;
    font-family: 'Shippori Mincho', serif;
    font-size: 1.4rem;
    color: #3e3a39;
}

.takuminokomeko-main h3, 
.takuminokomeko-main h4, 
.takuminokomeko-main ul, 
.takuminokomeko-main p {
    margin: 0;
}

.takuminokomeko-bg {
    margin-top: 60px;
    padding: 60px 0;
    background-color: #fcfaf2;
}

/* ↓ここから動き */

.tnk-fadeIn-up, .tnk-fadeIn-down {
    opacity: 0;
}

.tnk-fadeIn-up.tnk-scroll-in {
    animation-name: tnk-fadeIn-up;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes tnk-fadeIn-up {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(20px);
    }
  
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.tnk-fadeIn-down.tnk-scroll-in {
    animation-name: tnk-fadeIn-down;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes tnk-fadeIn-down {
    from {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-20px);
    }
  
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* ↑ここまで動き */

@media screen and (min-width:1200px) {

    .takuminokomeko-main {
        padding-top: 0;
        font-size: 1.5rem;
    }

}

/* takuminokomeko-topArea */

.takuminokomeko-topArea {
    overflow: hidden;
}

.takuminokomeko-kvSlideItem {
    height: 50vh;
}

.takuminokomeko-kvSlideItem:nth-of-type(1) {
    background: url(./img/takuminoko/kvSlide-image01.jpg) center center no-repeat;
    background-size: cover;
}

.takuminokomeko-kvSlideItem:nth-of-type(2) {
    background: url(./img/takuminoko/kvSlide-image02.jpg) center center no-repeat;
    background-size: cover;
}

.takuminokomeko-kvSlideItem:nth-of-type(3) {
    background: url(./img/takuminoko/kvSlide-image03.jpg) center center no-repeat;
    background-size: cover;
}

.takuminokomeko-topTitle {
    margin: 0 0 0 5%;
    padding: max(30px, 8vw) 0 max(60px, 16vw);
    position: relative;
}

.takuminokomeko-topTitle h2 {
    max-width: 300px;
    width: 55%;
    opacity: 0;
    animation-name: tnk-blurAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
}

@keyframes tnk-blurAnime {
    0% {
        filter: blur(10px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.tnk-topDeco {
    max-width: 320px;
    width: 52%;
    opacity: 0;
    position: absolute;
    right: -5%;
    bottom: 5%;
    animation-name: tnk-blurAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-delay: 1.1s;
}

p.takuminokomeko-copy {
    width: 90%;
    margin: 50px auto 0;
    font-size: max(1.7rem, 3.4vw);
    font-weight: 500;
    line-height: 2.2;
    letter-spacing: 3px;
}

.tnk-topContents-inner {
    overflow: hidden;
    margin-top: 50px;
}

.tnk-topContents-item {
    position: relative;
}

.tnk-topContents-inner01 .tnk-topContents-item {
    margin-left: 5%;
}

.tnk-topContents-inner02 .tnk-topContents-item {
    margin-right: 5%;
}

p.tnk-topContents-imageCopy {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: max(1.6rem, 3.2vw);
    font-weight: 500;
    line-height: 1;
    position: absolute;
    top: 0;
}

.tnk-topContents-inner01 p.tnk-topContents-imageCopy {
    left: 5%;
}

.tnk-topContents-inner02 p.tnk-topContents-imageCopy {
    right: 5%;
}

p.tnk-topContents-imageCopy span {
    display: inline-block;
    margin-right: max(8px, 1.6vw);
    padding: max(10px, 2vw);
    background-color: #fff;
}

p.tnk-topContents-imageCopy span:nth-of-type(2) {
    animation-delay: 0.2s;
}

p.tnk-topContents-text {
    width: 90%;
    margin: 20px auto 0;
    font-size: max(1.5rem, 2.2vw);
    font-weight: 500;
    line-height: 2;
}

.tnk-topContents-squareText {
    max-width: 460px;
    width: 75%;
    margin: 30px auto;
}

@media screen and (min-width:769px) {

    .takuminokomeko-topTitle {
        padding: 30px 0 60px;
    }

    p.takuminokomeko-copy {
        font-size: 1.7rem;
    }

    p.tnk-topContents-imageCopy {
        font-size: max(1.6rem, 1.1vw);
    }

    p.tnk-topContents-imageCopy span {
        margin-right: 8px;
        padding: 10px;
    }

    p.tnk-topContents-text {
        font-size: 1.5rem;
    }

}

/* takuminokomeko-sec */

.takuminokomeko-sec {
    padding-top: 60px;
}

.tnkSec-title {
    text-align: center;
    margin-bottom: 40px;
}

p.tnkSec-subTitle {
    margin-bottom: 1%;
    font-size: max(1.8rem, 2.8vw);
    font-weight: 500;
    line-height: 1;
    color: #a47c00;
}

p.tnkSec-subTitle span {
    opacity: 0;
}

.tnkSec-title h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-size: max(2.8rem, 4.8vw);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    gap: 0.8em;
    opacity: 0;
}

.tnkSec-title h3::before,
.tnkSec-title h3::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #a47c00;
}

.tnkSec-subTitle {
    white-space: nowrap;
}

.tnkSec-title h3 .tnkSec-subTitle span {
    opacity: 0;
}

/* ↓ここから動き */

.tnkTitle-fadeIn-slide.tnk-scroll-in, .tnkTitle-fadeIn-slide.tnk-scroll-in span {
  opacity: 0;
  transform: translateY(10px);
  animation-name: tnkTitle-fadeIn-slide;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes tnkTitle-fadeIn-slide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ↑ここまで動き */

@media screen and (min-width:769px) {

    p.tnkSec-subTitle {
        font-size: 1.8rem;
    }

    .tnkSec-title h3 {
        font-size: 2.8rem;
    }

}

/* 特長 */

ul.tnkFeatures-list li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0 0 5%;
}

h4.tnkFeatures-listTitle {
    font-size: max(1.7rem, 2.8vw);
    font-weight: 400;
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: relative;
    padding-top: 36px;
}

h4.tnkFeatures-listTitle::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-45%);
}

ul.tnkFeatures-list li:nth-of-type(1) h4.tnkFeatures-listTitle::before {
    background: url(./img/takuminoko/tnkFeatures-listTitle-num01.png) center no-repeat;
    background-size: contain;
}

ul.tnkFeatures-list li:nth-of-type(2) h4.tnkFeatures-listTitle::before {
    background: url(./img/takuminoko/tnkFeatures-listTitle-num02.png) center no-repeat;
    background-size: contain;
}

ul.tnkFeatures-list li:nth-of-type(3) h4.tnkFeatures-listTitle::before {
    background: url(./img/takuminoko/tnkFeatures-listTitle-num03.png) center no-repeat;
    background-size: contain;
}

.tnkFeatures-listInner {
    width: 100%;
}

.tnkFeatures-listImage {
    animation-delay: 0.1s;
}

p.tnkFeatures-listText {
    margin: 15px 6% 0 0;
    font-size: max(1.4rem, 2.2vw);
    animation-delay: 0.2s;
}

@media screen and (min-width:769px) {

    h4.tnkFeatures-listTitle {
        font-size: 1.7rem;
    }

    p.tnkFeatures-listText {
        font-size: 1.4rem;
    }

}

/* 例えばこんな使い方 */

ul.tnkRecipe-list {
    width: 90%;
    margin: 0 auto;
}

ul.tnkRecipe-list li {
    position: relative;
    margin-top: max(70px, 14vw);
}

h4.tnkRecipe-listTitle {
    max-width: 320px;
    width: 60%;
    position: absolute;
    top: -7%;
    left: 50%;
    transform: translateX(-50%);
}

p.tnkRecipe-listText {
    margin-top: 15px;
    font-size: max(1.4rem, 2.2vw);
}

p.tnkRecipe-listLink {
    width: fit-content;
    margin: 0 0 0 auto;
}

p.tnkRecipe-listLink a {
    display: block;
    margin-top: 10px;
    padding-right: 1.5em;
    background: url(./img/takuminoko/recipe-listLink-arrow.png) center right no-repeat;
    background-size: 1.3em;
    font-size: max(1.5rem, 2.2vw);
    color: #a47c00;
    text-align: right;
    text-decoration: none;
    transition: 0.4s;
}

p.tnkRecipe-listLink a:hover {
    opacity: 0.6;
}

@media screen and (min-width:769px) {

    ul.tnkRecipe-list li {
        margin-top: 70px;
    }

    p.tnkRecipe-listText {
        font-size: 1.4rem;
    }

    p.tnkRecipe-listLink a {
        font-size: 1.5rem;
    }

}

/* -----------------------
Q&A
(匠の米粉、から揚げ粉(共通)) 
----------------------- */

.tnkFaq-list:first-of-type, .tnkFaq-list:last-of-type, 
.karaagekoFaq-list:first-of-type, .karaagekoFaq-list:last-of-type {
    margin: 0;
}

.tnkFaq-list dt, 
.karaagekoFaq-list dt {
    margin: 15px 0 0;
    padding: 15px 38px;
}

.tnkFaq-list dd,
.karaagekoFaq-list dd {
    margin: 15px 0 0;
    padding: 15px 20px 15px 38px;
}

.tnkFaq-list .question, 
.karaagekoFaq-list .question {
    font-size: max(1.4rem, 2.2vw);
    position: relative;
    background-size: 15px;
    background-position: right 20px top 20px;
    background-repeat: no-repeat;
}

.tnkFaq-list .question::before, 
.karaagekoFaq-list .question::before {
    top: 13px;
    left: 20px;
    font-size: max(1.6rem, 2.4vw);
}

.tnkFaq-list .question.open, 
.karaageko-list .question.open {
    background-position: right 20px top 27px;
}

.tnkFaq-list .answer, 
.karaagekoFaq-list .answer {
    font-size: max(1.4rem, 2.2vw);
}

.tnkFaq-list .answer::before, 
.karaagekoFaq-list .answer::before {
    top: 13px;
    left: 20px;
    font-size: max(1.6rem, 2.4vw);
}

.tnkFaq-list .answer a, 
.karaagekoFaq-list .answer a {
    text-decoration: underline;
}

/* Q&A */

.tnkFaq-list .question {
    background-color: #a47c00;
    color: #fff;
    background-image: url(./img/takuminoko/faq-plus.png);
}

.tnkFaq-list .question::before {
    color: #fff;
}

.tnkFaq-list .question.open {
    background-image: url(./img/takuminoko/faq-minus.png);
}

.tnkFaq-list .answer {
    background-color: #f1ebd9;
}

.tnkFaq-list .answer::before {
    color: #a47c00;
}

.tnkFaq-list .answer a {
    color: #a47c00;
}

@media screen and (min-width:769px) {

    /* -----------------------
    Q&A
    (匠の米粉、から揚げ粉(共通)) 
    ----------------------- */

    .tnkFaq-list .question, 
    .karaagekoFaq-list .question {
        font-size: 1.4rem;
    }

    .tnkFaq-list .question::before, 
    .karaagekoFaq-list .question::before {
        font-size: 1.6rem;
    }

    .tnkFaq-list .answer, 
    .karaagekoFaq-list .answer {
        font-size: 1.4rem;
    }

    .faq-list .answer::before, 
    .karaageko-list .answer::before {
        font-size: 1.6rem;
    }

}

/* Instagram */

.tnkSec-instagram {
    padding-bottom: 40px;
}

.tnkInstagram-main {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.tnkInstagram-main #sb_instagram {
    padding: 0!important;
}

.tnkInstagram-main #sbi_images {
    padding: 0!important;
}

.tnkInstagram-link {
    max-width: 160px;
    width: 30%;
    position: absolute;
    bottom: -40px;
    left: 50%;
    translate: -50% 0;
}

.tnkInstagram-link a {
    display: block;
}

.tnkSec-shop {
    margin-top: 50px;
    padding: 50px 0;
    background-color: #a47c00;
}

p.tnkShop-text {
    display: block;
    font-size: max(1.8rem, 2.8vw);
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

p.tnkShop-text::before, p.tnkShop-text::after {
    content: "";
    width: 1px;
    height: 1em;
    background-color: #fff;
}

p.tnkShop-text::before {
    transform: rotate(-30deg);
}

p.tnkShop-text::after {
    transform: rotate(30deg);
}

ul.tnkShop-slide {
    margin-top: 30px;
}

p.tnkShop-button {
    width: 90%;
    margin: 30px auto 0;
}

p.tnkShop-button a {
    display: block;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 15px;
    font-size: max(1.8rem, 2.8vw);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition: 0.4s;
}

p.tnkShop-button a:hover {
    color: #a47c00;
    background-color: #fff;
}

@media screen and (min-width:769px) {

    p.tnkShop-text {
        font-size: 1.8rem;
    }

    p.tnkShop-button a {
        font-size: 1.8rem;
    }

}


/*--------------*/
/*  から揚げ粉
/*--------------*/

/* loading */

#loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: url(./img/karaageko/karageko-loadingBg.jpg) center center repeat;
    background-size: cover;
    text-align: center;
}

#loading_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loadingText {
    font-size: 2.4rem;
    font-family: 'Shippori Mincho', serif;
    color: #fff;
}

/* common */

.karaageko-whole-container {
    background-color: initial;
}

.karaageko-pcMenu, .karaageko-pcLogo {
    width: calc(50% - 240px);
    position: fixed;
    top: 0;
    height: 100vh;
    background: url(./img/karaageko/karageko-bg01.jpg) center center repeat;
    background-size: contain;
}

.karaageko-pcMenu {
    right: 0;
}

.karaageko-pcLogo {
    left: 0;
}

.karaageko-pcMenu-inner, .karaageko-pcLogo-inner {
    display: none;
}

.karaageko-main-container {
    background: url(./img/karaageko/karageko-bg01.jpg) center center repeat;
    background-size: contain;
    box-shadow: none;
}

.karaageko-main {
    padding-top: 100px;
    font-family: 'Shippori Mincho', serif;
    font-size: 1.4rem;
    color: #3e3a39;
}

.karaageko-bg {
    background: url(./img/karaageko/karageko-bg02.jpg) center center repeat;
    background-size: contain;
    margin-top: 70px;
    padding-bottom: 70px;
}

.karaageko-main h3, 
.karaageko-main h4, 
.karaageko-main ul, 
.karaageko-main p {
    margin: 0;
}

@media screen and (min-width:480px) {

    .karaageko-main-container {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
    }

}

@media screen and (min-width:1080px) {

    /* PC画面 サイドメニュー */

    .karaageko-pcMenu, .karaageko-pcLogo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .karaageko-pcMenu-inner, .karaageko-pcLogo-inner {
        display: block;
    }

    .karaageko-header .hamburger {
        display: none;
    }

    /* pcMenu */

    .karaageko-pcMenu-inner {
        max-width: 340px;
        width: 60%;
    }

    .karaageko-pcMenu-inner .pcMenu-list {
        margin: 0;
        display: flex;
        justify-content: space-between;
    }

    .karaageko-pcMenu-inner .pcMenu-listItem {
        width: 10%;
    }

    .karaageko-pcMenu-inner .pcMenu-listItem a {
        display: block;
        position: relative;
        transition: 0.3s;
    }

    .karaageko-pcMenu-inner .pcMenu-listItem a::before {
        content: "";
        display: block;
        width: 1px;
        height: 30px;
        margin: 0 auto 15px;
        background-color: #fff;
    }

    .karaageko-pcMenu-inner .pcMenu-listItem a:hover {
        opacity: 0.5;
    }

    /* pcLogo */

    .karaageko-pcLogo {
        left: 0;
    }

    .karaageko-pcLogo-inner {
        max-width: 350px;
        width: 60%;
        transform: translateX(8%);
    }

    /* pcMenu,pcLogoの動き */

    .pcMenu-listItem, .karaageko-pcLogo-inner {
        opacity: 0;
    }

    /* .pcMenu-listItem.animate, .karaageko-pcLogo-inner.animate {
        animation: karaagekoPcLogo-ZoomIn 0.3s forwards;
        animation-delay: 1s;
    }

    @keyframes karaagekoPcLogo-ZoomIn {
        0% {
        opacity: 0;
        transform: scale(1.5);
        }
    
        100% {
        opacity: 1;
        transform: scale(1);
        }
    } */

    .pcMenu-listItem.animate, .karaageko-pcLogo-inner.animate {
        animation: karaagekoPcLogo-fadeIn 0.3s forwards;
        animation-delay: 1.1s;
    }

    @keyframes karaagekoPcLogo-fadeIn {
        0% {
        opacity: 0;
        filter: blur(10px);
        }
    
        100% {
        opacity: 1;
        filter: blur(0);
        }
    }

    /* ここまで動き */

}

/* header */

.karaageko-header {
    max-width: 480px;
}

.karaageko-main-container .header-logo {
    position: relative;
    left: 20px;
    margin: 0;
    padding: 0;
}

.karaageko-main-container .header-logo a {
    display: block;
}

.karaageko-header .header-logo img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out;
}

/* 変化ロゴは最初透明 */
.karaageko-header .header-logo .top-logo-ChangeColor {
    opacity: 0;
}

/* logo-changeが付いたら通常ロゴを消して */
.karaageko-header.logo-change .header-logo img:not(.top-logo-ChangeColor) {
    opacity: 0;
}

/* 変化ロゴを表示 */
.karaageko-header.logo-change .header-logo .top-logo-ChangeColor {
    opacity: 1;
}

.karaageko-header .hamburger {
    background-color: #e60012;
}

/* globalMenuSp */

nav.karaageko-globalMenuSp {
    background: url(./img/karaageko/karageko-bg01.jpg) center center repeat;
    background-size: contain;
}

.karaageko-globalMenuSp .karaageko-gMenu-list {
    margin: 0;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem {
    width: initial;
    margin-top: 30px;
    padding: 0;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:first-of-type {
    margin-top: 0;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem img {
    width: auto;
    height: 25px;
}

.karaageko-globalMenuSp .pcMenu-homeButton {
    margin: 40px 0 0;
}

.karaageko-globalMenuSp .pcMenu-homeButton a {
    font-size: 1.6rem;
    font-weight: 600;
}

/* スマホメニューの動き */

.karaageko-gMenu-listItem, 
.karaageko-globalMenuSp .pcMenu-homeButton {
    opacity: 0;
}

.karaageko-globalMenuSp.active .karaageko-gMenu-listItem, 
.karaageko-globalMenuSp.active .pcMenu-homeButton {
    animation: karaageko-gMenu-fadeIn 0.4s forwards;
}

@keyframes karaageko-gMenu-fadeIn {
    0% {
      opacity: 0;
      filter: blur(10px);
    }
  
    100% {
      opacity: 1;
      filter: blur(0);
    }
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:nth-of-type(1) {
    animation-delay: 0.2s;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:nth-of-type(2) {
    animation-delay: 0.3s;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:nth-of-type(3) {
    animation-delay: 0.4s;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:nth-of-type(4) {
    animation-delay: 0.5s;
}

.karaageko-globalMenuSp .karaageko-gMenu-listItem:nth-of-type(5) {
    animation-delay: 0.6s;
}

.karaageko-globalMenuSp.active .pcMenu-homeButton {
    animation-delay: 0.7s;
}

/* ここまで動き */

/* topArea */

.karaageko-kv {
    position: relative;
}

.karaageko-kvMain {
    width: 25%;
    margin: 0 auto;
}

.karaageko-kvDeco {
    position: absolute;
}

.karaageko-kvDeco01 {
    width: 26%;
    top: -6%;
    right: 14%;
}

.karaageko-kvDeco02 {
    width: 9%;
    bottom: 26%;
    left: 30%;
}

.karaageko-kvDeco03 {
    width: 14%;
    bottom: 8%;
    left: 26%;
}

.karaageko-topImage {
    margin-top: 70px;
}

/* 動き */

/* キービジュアルの動き */

.karaageko-kv .kraagekoKv-ZoomIn {
    opacity: 0;
}

.karaageko-kv.animate .kraagekoKv-ZoomIn {
    animation: kraagekoKv-ZoomIn 0.2s ease-in forwards;
}

@keyframes kraagekoKv-ZoomIn {
    0% {
      opacity: 0;
      transform: scale(3);
    }
  
    100% {
      opacity: 1;
      transform: scale(1);
    }
}

.karaageko-kv.animate .karaageko-kvDeco01.kraagekoKv-ZoomIn {
    animation: kraagekoKv-ZoomIn2 0.15s ease-in forwards;
    animation-delay: 0.55s;
}

@keyframes kraagekoKv-ZoomIn2 {
    0% {
      opacity: 0;
      transform: scale(5);
    }
  
    100% {
      opacity: 1;
      transform: scale(1);
    }
}

.karaageko-kv.animate .karaageko-kvDeco02.kraagekoKv-ZoomIn {
    animation-delay: 0.15s;
}

.karaageko-kv.animate .karaageko-kvDeco03.kraagekoKv-ZoomIn {
    animation-delay: 0.25s;
}

/* karaageko-topImageの動き */

.karaageko-topImage {
    opacity: 0;
}

.karaageko-topImage.animate {
    animation: karaageko-fadeIn 0.8s forwards;
    animation-delay: 0.8s;
}

@keyframes karaageko-fadeIn {
    0% {
      opacity: 0;
      filter: blur(10px);
    }
  
    100% {
      opacity: 1;
      filter: blur(0);
    }
}

/* ここまで動き */

.karaageko-concept {
    margin-top: 60px;
}

.karaageko-mainCopy {
    width: 23%;
    margin: 0 auto;
    display: flex;
    gap: 12px;
    flex-direction: row-reverse;
}

.karaageko-mainCopy-inner:nth-of-type(2) {
    margin-top: 50px;
}

.karaageko-main .karaageko-conceptText {
    margin-top: 30px;
    font-size: 16px;
    line-height: 2.6;
    text-align: center;
    color: #fff;
}

/* 特長、レシピ、ご質問の動き */

.karaageko-fadeInDown {
    opacity: 0;
}

/* .karaageko-fadeInUp.karaageko-scrollIn {
    animation: karaageko-fadeInUp 0.4s ease-out forwards;
}

@keyframes karaageko-fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(15px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
} */

.karaageko-fadeInDown.karaageko-scrollIn {
    animation: karaageko-fadeInDown 0.6s forwards;
}

@keyframes karaageko-fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-15px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}

/* 特長の動き */

.karaageko-featuresImage, .karaageko-featuresDeco, .karaageko-featuresCopy, .karaageko-featuresText {
    opacity: 0;
}

.karaageko-fadeInAnimate.karaageko-scrollIn .karaageko-featuresImage {
    animation: karaageko-fadeIn 0.6s forwards;
}

.karaageko-fadeInAnimate.karaageko-scrollIn .karaageko-featuresDeco {
    animation: kraagekoKv-ZoomIn 0.15s ease-in forwards;
    animation-delay: 0.7s;
}

@keyframes kraagekoKv-ZoomIn {
    0% {
      opacity: 0;
      transform: scale(3);
    }
  
    100% {
      opacity: 1;
      transform: scale(1);
    }
}

.karaageko-fadeInAnimate.karaageko-scrollIn .karaageko-featuresCopy, 
.karaageko-fadeInAnimate.karaageko-scrollIn .karaageko-featuresText {
    animation: karaageko-fadeIn 0.4s forwards;
    animation-delay: 0.4s;
}

/* ここまで動き */

/* karaageko-sec */

.karaageko-sec {
    padding-top: 70px;
}

.karaageko-main .karaagekoSec-title {
    width: 8%;
    margin: 0 auto 50px;
}

.karaageko-main .karaagekoSec-title::before {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    margin: 0 auto 10px;
}

.karaageko-main .karaagekoSec-title-wh::before {
    background-color: #fff;
}

.karaageko-main .karaagekoSec-title-bl::before {
    background-color: #3e3a39;
}

/* 特長 */

.karaagekoSec-features {
    color: #fff;
}

.karaageko-main .karaageko-featuresList {
    width: 85%;
    margin: 0 auto;
}

.karaageko-featuresItem {
    margin-top: 50px;
}

.karaageko-featuresImage-box {
    position: relative;
}

.karaageko-featuresDeco {
    width: 80px;
    position: absolute;
    bottom: -5%;
    left: -5%;
}

.karaageko-featuresCopy {
    width: 90%;
    margin-top: 40px;
}

.karaageko-main .karaageko-featuresText {
    margin-top: 20px;
}

/* レシピ */

.karaageko-recipeSlideBox {
    position: relative;
}

/* .karaageko-instagramDeco {
    width: 80px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
} */

.karaageko-recipeTextBox {
    width: 90%;
    margin: 40px auto 0;
}

.karaageko-main .karaageko-recipeText {
    margin-top: 20px;
}

.karaageko-recipeButton a {
    text-decoration: none;
    display: block;
    margin-top: 20px;
    border-radius: 30px;
    padding: 8px;
    background-color: #e60012;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    transition: 0.3s;
    position: relative;
}

.karaageko-recipeButton a::after {
    content: "＞";
    position: absolute;
    top: 50%;
    right: 20px;
    translate: 0 -50%;
}

.karaageko-recipeButton a:hover {
    opacity: 0.5;
}

/* ご質問 */

.karaagekoFaq-list .question {
    background-color: #3e3a39;
    color: #fff;
    background-image: url(./img/takuminoko/faq-plus.png);
}

.karaagekoFaq-list .question::before {
    color: #fff;
}

.karaagekoFaq-list .question.open {
    background-image: url(./img/takuminoko/faq-minus.png);
}

.karaagekoFaq-list .answer {
    background-color: #fff;
}

.karaagekoFaq-list .answer::before {
    color: #e60012;
}

.karaagekoFaq-list .answer a {
    color: #e60012;
}

/* インスタグラム */

.karaagekoSec-instagram {
    width: 85%;
    margin: 0 auto;
    padding-top: 80px;
    position: relative;
}

.karaagekoInstagram-main {
    margin-top: 30px;
    padding-bottom: 50px;
}

.karaagekoInstagram-button {
    max-width: 160px;
    width: 30%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
}

.karaagekoInstagram-button a {
    display: block;
    transition: 0.3s;
}

.karaagekoInstagram-button a:hover {
    transform: scale(1.2);
}

/* オンラインショップ */

.karaagekoSec-shop {
    padding-bottom: 70px;
}

.karaageko-main .karaagekoShop-text {
    width: 90%;
    margin: 0 auto;
}

.karaagekoShop-image {
    width: 60%;
    margin: 30px auto 0;
}

.karaagekoShop-button a {
    pointer-events: none;
    cursor: default;
    display: block;
    width: 85%;
    margin: 25px auto 0;
    border-radius: 26px;
    padding: 10px 0;
    background-color: #999999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}