@charset "utf-8";

/*-------------------
reset
-------------------*/
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
body {
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
#root, #__next {
    isolation: isolate;
}

/*-------------------
root
-------------------*/
*,
::before,
::after {
    --clamp-root-font-size: 16;
    --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
    --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
    --clamp-preferred-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
    );
    --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preferred-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
    );
}

:root {
    --layout-width-min: 390px;
    --layout-width-max: 1366px;

    /*--center-width: clamp(
        390px,
        calc(100dvw * 780 / var(--layout-width-max)),
        780px
    );*/

    --design-width-max: 780px;
    --center-width: clamp(390px, 100dvw, 780px);

    /* center基準スケール */
    --r-design: calc(var(--center-width) / var(--design-width-max));

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-darkgray: #040000;

    --color-darkblue: #103675;
    --color-lightblue: #6badcd;
    --color-saxeblue: #3388bb;
    --color-smokyblue: #63add5;
    --color-paleblue: #66b9d0;
    --color-aqua: #e0f1f6;
    --color-pink: #e98696;
    --color-salmonpink: #da505b;
    --color-palepink: #f9dade;
    --color-orange: #f0a61e;
    --color-paleyellow: #fbeac3;
    --color-matcha: #99d078;
    --color-green: #39a474;
    --color-deepgreen: #00673a;

    --color-link: #469ecd;

    --bg-wave-white: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_white.png");
    --bg-wave-red: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_red.png");
    --bg-wave-blue: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_blue.png");
    --bg-wave-green: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_green.png");
    --bg-wave-yellow: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_yellow.png");

    --font-weight-normal: 400;
    --font-weight-regular: 500;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 900;

    --font-cplpgp: "corporate-logo-ver2", sans-serif;

    --space-xs: clamp(8px,  calc(16px * var(--r-design)), 16px);
    --space-sm: clamp(12px, calc(24px * var(--r-design)), 24px);
    --space-rg: clamp(16px, calc(32px * var(--r-design)), 32px);
    --space-md: clamp(24px, calc(48px * var(--r-design)), 48px);
    --space-lg: clamp(32px, calc(64px * var(--r-design)), 64px);
    --space-xl: clamp(40px, calc(80px * var(--r-design)), 80px);
    
    --slant: calc(var(--center-width) * 0.12278);
}

/*-------------------
base
-------------------*/

html, body {
    min-height: 100%;
}

body {
    --clamp-viewport-min: 390;
    --clamp-viewport-max: 1366;
    --clamp-min: 14;
    --clamp-max: 16;
    font-size: var(--clamp);
    letter-spacing: 0.02em;
    line-height: 1.6;
    letter-spacing: 0.01em;
    font-feature-settings: "palt";
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* 読み込み中 */
.wf-loading .p-side__menu__list,
.wf-loading .p-homenav__list {
	opacity: 0;
}

/* 読み込み完了 */
.wf-active .p-side__menu__list,
.wf-active .p-homenav__list {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* 読み込み失敗 */
.wf-inactive .p-side__menu__list,
.wf-inactive .p-homenav__list {
	opacity: 1;
}

img {
    max-width: 100%;
    line-height: 0;
    vertical-align: middle;
}

.img_protect {
    position: relative;
    display: block;
}

.img_protect img, .img_protect picture {
    display: block;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.img_protect::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-image: url("https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/transparent.png");
    background-size: cover;
    background-repeat: repeat;
    background-position: left top;
    pointer-events: all;
    }

h1,h2,h3,h4 {
    margin-block-start: 0;
    margin-block-end: 0;
}

.sp_view {
    display: block;
}

.pc_view {
    display: none;
}

small {
    --clamp-min: 11;
    --clamp-max: 14;
    font-size: var(--clamp);
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--color-darkblue);
    outline-offset: 4px;
}

a img {
  display: block;
}

@media (hover: hover) {
  a:hover {
    opacity: 0.85;
  }
}

@media screen and (min-width: 1025px) {
    .sp_view {
        display: none;
    }
    .pc_view {
        display: block;
    }   
}

/*-------------------
style
-------------------*/

/* ---------- common ---------- */
.font-small {
    font-size: 90%;
}

.mgb-0 {
    margin-block-end: 0!important;
}

.area {
    position: relative;
    margin-inline: auto;
    z-index: 0;
}

.area--up {
    position: relative;
    margin-inline: auto;
    z-index: 1;
}

.area__bg {
    position: absolute;
    inset: 0; 
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.area__bg__item {
    position: absolute;
}

.area__contents {
    position: relative;
    z-index: 10;
}

.area--slanted-right::after {
    content: "";
    position: absolute;
    bottom: calc(-1px * var(--slant) * 1.5);
    left: 0;
    width: 100%;
    height: calc(var(--slant) * 4);
    background: inherit;
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
    z-index: 1;
    pointer-events: none;
}

.area--slanted-left::after {
    content: "";
    position: absolute;
    bottom: calc(-1px * var(--slant) * 1.5);
    left: 0;
    width: 100%;
    height: calc(var(--slant) * 4);
    background: inherit;
    clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    z-index: 1;
    pointer-events: none;
}

.c-list {
    list-style: none;
    --clamp-min: 14;
    --clamp-max: 16;
    font-size: var(--clamp);
}

.c-list--white, .text--white {
    color:var(--color-white);
}

.c-list__cautions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-list__cautions li {
    position: relative;
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-height: 1.4;
    font-weight: 500;
}

.c-list__cautions li::before {
    content: "※";
    margin-right: 0.2em;
}

.c-list__disc {
    margin: 0;
    padding: 0;
    font-weight: 500;
}

.c-list__disc li {
    --clamp-max: 18;
    position: relative;
    padding-left: 0.5em;
    line-height: 1.4;
}

.c-list__disc li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

.c-line--dot {
    display: block;
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.c-list--outbox {
    margin-block-start: 0.5em;
    margin-block-end: var(--space-md);
    margin-inline: var(--space-rg);
}

.c-list--center {
    width: fit-content;
    margin-inline: auto;
    text-align: center;
}

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

.c-bg__wave {
    background-size: clamp(14px, calc(28px * var(--r-design)), 28px);
}

.c-bg__wave--white {
    background-image: var(--bg-wave-white);
}

.c-bg__wave--red {
    background-image: var(--bg-wave-red);
}

.c-bg__wave--blue {
    background-image: var(--bg-wave-blue);
}

.c-bg__wave--green {
    background-image: var(--bg-wave-green);
}

.c-bg__wave--yellow {
    background-image: var(--bg-wave-yellow);
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@container area-box (min-width: 540px) and (max-width: 640px) {
    .c-title__orange {
        --clamp-max: 54;
        --clamp-min: 20;
    }
}

/* ---------- layout ---------- */

.l-main {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.l-main__areasticky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.p-bg {
    display: flex;
    width: 100%;
    height: 100%;
    background: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/bg_sky.jpg) no-repeat center / cover;
}

.p-bg__left,
.p-bg__right {
    display: none;
}

.p-bg__center {
    width: 100%;
    height: 100%;
    margin-inline: auto;
}

.l-main__areascroll {
    width: 100%;
    margin-inline: auto;
    position: relative;
    z-index: 5;
    background-color: var(--color-lightblue);
    overflow: hidden;
    container-type: inline-size;
    container-name: area-scroll;
}

@media (min-width: 1025px) {
    .p-bg {
        pointer-events: auto;
    }

    .p-bg__left,
    .p-bg__right {
        display: grid;
        place-content: center;
        width: calc((100% - var(--center-width)) / 2);
        height: 100%;
    }

    .p-bg__right

    .p-bg__right img {
        width: 100%;
    }

    .p-bg__left div {
        width: 90%;
        margin-inline: auto;
    }

    .p-bg__center {
        width: var(--center-width);
    }

    .l-main__areascroll {
        width: var(--center-width);
    }
}

/* ---------- navigation ---------- */
.p-side__menu {
    max-width: 90%;
    margin-inline: auto;
    position: relative;
}

.p-menu__title {
    text-align: center;
    font-weight: bold;
    font-size: clamp(12px, 10cqw, 28px);
    font-family: var(--font-cplpgp);
    color: var(--color-lightblue);
    border-bottom: solid 1px var(--color-lightblue);
    margin-block-end: 0.5em;
}

.p-menu__item--home {
    width: 80%;
    margin-inline:auto;
    text-align: center;
    font-weight: bold;
    font-size: clamp(10px, 8cqw, 24px);
    font-family: var(--font-cplpgp);
    color: var(--color-white);
    margin-block-end: 0.5em;
    color: var(--color-white);
    background-color: var(--color-lightblue);
    margin-block-start: 1em;
    border-radius: 9999px;
}

.p-side__menu__list {
    container-type: inline-size;
    width: 90%;
    height: auto;
    inset: 0;
    margin: auto;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-menu {
    width: fit-content;
    list-style: none;
    padding: 0;
    margin-inline: auto;
    counter-reset: menu-count;
}

.p-menu__item:not(:last-child) {
    margin-block-end: 0.6em;
}

.p-menu__link {
    letter-spacing: -0.01em;
    display: flex;
    align-items: flex-start; 
    gap: 0.5em;
    text-decoration: none;
    color: var(--color-darkblue);
    font-family: var(--font-cplpgp);
    font-weight: var(--font-weight-bold);
    font-size: clamp(12px, 10cqw, 28px);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.p-menu__link::before {
    content: ""; 
    display: block;
    flex-shrink: 0;
    width: 8cqw;
    height: 8cqw;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-top: 0.3em;
}

.p-menu__item--01 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_01.png);
}
.p-menu__item--02 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_02.png);
}
.p-menu__item--03 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_03.png);
}
.p-menu__item--04 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_04.png);
}
.p-menu__item--05 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_05.png);
}
.p-menu__item--06 .p-menu__link::before {
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/common/nav_number_06.png);
}

@media (hover: hover) {
  .p-menu__link:hover {
    color: var(--color-saxeblue);
  }
}

/* ---------- sp-navigation ---------- */
.c-hamburger {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: none;
    place-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.c-hamburger span {
    width: 26px;
    height: 2px;
    background: var(--color-darkblue);
    transition: transform .3s ease, opacity .3s ease;
}

/* ×アニメーション */
.c-hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.c-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.c-hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===============================
   SPメニュー
================================= */
.p-sp__menu {
  position: fixed;
  inset: 0;
  background: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  transform: translateX(100%);
  transition: transform .4s ease;
  z-index: 1000;
}

.p-sp__menu__inner {
  width: 90%;
  text-align: center;
}

.p-sp__menu.is-open {
  transform: translateX(0);
}

.p-sp__menu__inner .p-menu__item:not(:last-child) {
    margin-block-end:1em;
}

.p-sp__menu__inner .p-menu__link::before {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
}

.btn_home {
    display: inline-block;
    width: 80%;
    text-align: center;
    text-align: center;
    font-weight: bold;
    --clamp-min: 20;
    --clamp-max: 32;
    font-size: var(--clamp);
    font-family: var(--font-cplpgp);
    color: var(--color-white);
    background-color: var(--color-lightblue);
    margin-block-start: 1em;
    border-radius: 9999px;
}

.btn_home::before {
    content: none;
}

/* ===============================
   スマホのみ有効
================================= */
@media (max-width: 1024px) {

  .c-hamburger {
    display: grid;
  }

  .p-sp__menu {
    display: flex;
  }
}

/* スクロールロック */
body.is-menu-open {
  overflow: hidden;
}

/* アクセシビリティ用 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- page ---------- */

.slant__bg {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slant__parts {
    position: absolute;
    width: 100%;
}

.p-page__area {
    padding-block: var(--space-md);
    position: relative;
    z-index: 0;
}

.border--orange {
    border-color: var(--color-orange);
}

.border--paleblue {
    border-color: var(--color-paleblue);
}

.border--saxeblue {
    border-color: var(--color-saxeblue);
}

.border--green {
    border-color: var(--color-deepgreen);
}

.border--matcha {
    border-color: var(--color-matcha);
}

.border--pink {
    border-color: var(--color-pink);
}

.p-page__title {
    margin-block-end: var(--space-lg);
}

.p-box {
    margin-inline: var(--space-rg);
    margin-block-end: var(--space-lg);
    border-radius: clamp(8px, calc(15px * var(--r-design)), 15px);
    position: relative;
}

.p-box:last-child {
    margin-block-end: 0;
}

.p-box--simple {
    border-style: solid;
    border-width: clamp(4px, calc(8px * var(--r-design)), 8px);
    background-color: var(--color-white);
    padding-block: var(--space-md);
    padding-inline: var(--space-rg);
}

.p-box__circle {
    width: clamp(80px, calc(190px * var(--r-design)), 190px);
    height: clamp(80px, calc(190px * var(--r-design)), 190px);
    position: absolute;
    top: clamp(-42px, calc(-42px * var(--r-design)), -22px);
    left: clamp(-25px, calc(-25px * var(--r-design)), -12px);
    z-index: 2;
}

.p-box__text {
    margin-block-end: var(--space-rg);
    line-height: 1.4;
    --clamp-min: 16;
    --clamp-max: 34;
    font-size: var(--clamp);
    font-weight: var(--font-weight-regular);
    text-align: center;
}

.p-box__text--middle {
    --clamp-min: 16;
    --clamp-max: 24;
    font-size: var(--clamp);
}

.p-box__text--small {
    --clamp-min: 14;
    --clamp-max: 18;
    font-size: var(--clamp);
}

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

.p-box__text a {
    color: var(--color-link);
    text-decoration: underline;
}

.p-box--addtitle {
    border-style: solid;
    border-width: clamp(4px, calc(8px * var(--r-design)), 8px);
    background-color: var(--color-white);
}

.p-box--addtitle .box__heading {
    padding-block: var(--space-rg);
}

.border--green .box__heading {
    background-color: var(--color-deepgreen);
}

.border--matcha .box__heading {
    background-color: var(--color-matcha);
}

.border--saxeblue .box__heading {
    background-color: var(--color-saxeblue);
}

.border--orange .box__heading {
    background-color: var(--color-orange);
}

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

.box__heading--center h2 {
    display: inline-block;
}

.p-box--addtitle .box__body {
    padding-block: var(--space-md);
    padding-inline: var(--space-sm);
}

.p-box__img {
    width: 100%;
    margin-inline: auto;
    margin-block-end: var(--space-rg);
}

.p-page__area:last-of-type > *:last-child {
    margin-block-end: 0;
}

.area__contents:last-of-type > *:last-child {
    margin-block-end: 0;
}

.p-box article:last-of-type {
    margin-block-end: 0;
}

.p-box article:last-of-type > *:last-child {
    margin-block-end: 0;
}

.c-line--dot {
    margin-block-end: var(--space-rg);
}

@media screen and (min-width: 1025px) {
    .img--90{
        width: 90%;
    }
    .img--80{
        width: 80%;
    }
    .img--60{
        width: 60%;
    }
}

/* ---------- footer ---------- */
footer {
    position: relative;
    z-index: 5;
}

.p-footer {
    padding-block-start: var(--space-md);
    padding-block-end: var(--space-sm);
    background-color: var(--color-white);
    text-align: center;
}

.p-footer__logo {
    width:clamp(124px, calc(268px * var(--r-design)), 268px);
    margin-inline: auto;
    margin-block-end: 1em;
}

.p-footer__logo img {
    width: 100%;
}

/* ---------- info ---------- */

.p-info .area__contents {
    padding-block-start: var(--space-xl);
    padding-block-end: var(--space-md);
}

.p-btn__SNS {
    width: min(90%,clamp(240px, calc(640px * var(--r-design)), 640px));
    margin-block-end: var(--space-md);
    border-radius: 9999px;
    margin-inline: auto;
    position: relative;
    background-color: var(--color-white);
    text-align: center;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}

.p-btn__SNS::after {
    content: "";
    display: block;
    position: absolute;
    width: clamp(68px, calc(128px * var(--r-design)), 128px);
    height: clamp(68px, calc(128px * var(--r-design)), 128px);
    background-image: url(https://cf.creativeplus.co.jp/gintama-buraritabi.jp/images/home/icon_x.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: -1em;
    top: 50%;
    transform: translateY(-50%);
}

.p-btn__SNS a  {
    width: 100%;
    height: 100%;
    display: inline-block;
    margin-inline: auto;
    padding-block-start: 0.7em;
    padding-block-end: 0.9em;
    text-indent: -0.5em;
    letter-spacing: 0.03em;
    --clamp-min: 16;
    --clamp-max: 30;
    font-size: var(--clamp);
    font-weight: var(--font-weight-bold);
    transform: translateX(-0.5em);
}

.p-btn__SNS a span {
    --clamp-min: 14;
    --clamp-max: 24;
    font-size: var(--clamp);
}

.p-btn__support {
    width: min(90%,clamp(240px, calc(490px * var(--r-design)), 490px));
    margin-inline: auto;
}

.p-btn__support a {
    width: 100%;
    margin-inline: auto;
    padding-block: 0.8em;
    display: inline-grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    background-color: var(--color-darkblue);
    color: var(--color-white);
}

.p-btn__support a::before {
    content: "";
}

.p-btn__support a .text{
    display: block;
    --clamp-min: 14;
    --clamp-max: 23;
    font-size: var(--clamp);
    font-weight: var(--font-weight-medium);
}

.p-btn__support a .icon {
    justify-self: end;
    width: 1.2em;
    height: 1.2em;
    margin-right: 1em;
    transform: translateY(0.05em);
}

.p-info .copyright {
    text-align: right;
    padding-bottom: 0.5em;
}

.p-info .copyright small {
    padding-right: 1em;
}