@charset "UTF-8";

:root {
  --color-blu: #25ABC6;
  --color-brw: #977965;
  --color-ylw: #F8F800;
  --color-blk: #232323;
  --color-org: #FC9023;
  --font-main: "Roboto","Zen Kaku Gothic New", serif;
  --font-sub: "Roboto", serif;
  --font-size-l: 2rem;
  --font-size-n: 1.8rem;
  --font-size-s: 1.6rem;
  --font-size-ss: 1.4rem;
  --max_width: 1514px;
  --md_width: 1260px;
  --section_space :120px;
}
html,
body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-size: 10px;
  line-height: 2em;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--color-blk);
  background: #fff;
  background-image: url(images/bg_brw.png);
  background-repeat: no-repeat;
  scroll-behavior: smooth;
  background-size: 2000px 1333px;
  -webkit-font-smoothing: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

* {
  box-sizing: border-box;
  position: relative;
}
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3{
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  list-style: none;
  line-height: 1.4em;
}
a {
  color: var(--color-org);
  transition: .2s;
}
a:has(>img):hover,
.btn:hover {
  filter: brightness(1.1);
}
img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
p {
  font-size: var(--font-size-n);
  line-height: 2em;
  padding: 0;
  margin: 0;
  text-align: justify;
}
.strong {
    font-weight: 600;
}
.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-indent: 100px;
}
.icon_insta::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.44 512" fill="%23977965"><path d="m358.74,0h-214.05C64.78,0,0,64.78,0,144.7v222.61c0,79.91,64.78,144.7,144.69,144.7h214.05c79.91,0,144.7-64.78,144.7-144.7v-222.61c0-79.91-64.78-144.69-144.69-144.69ZM51.37,144.7c0-51.46,41.86-93.32,93.32-93.32h214.05c51.46,0,93.32,41.86,93.32,93.32v222.61c0,51.46-41.86,93.32-93.32,93.32h-214.05c-51.46,0-93.32-41.86-93.32-93.32v-222.61Z"/><path class="cls-1" d="m251.72,387.85c72.7,0,131.85-59.15,131.85-131.85s-59.15-131.86-131.85-131.86-131.85,59.15-131.85,131.86,59.15,131.85,131.85,131.85Zm0-222.61c50.04,0,90.75,40.71,90.75,90.76s-40.71,90.76-90.75,90.76-90.75-40.71-90.75-90.76,40.71-90.76,90.75-90.76Z"/><circle class="cls-1" cx="387.43" cy="120.3" r="29.54"/></svg>');
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    content: '';
    z-index: 10;
    width: 29.478px;
    height: 30px;
    background-size: cover;
}
.fat-nav .icon_insta::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 503.44 512" fill="%23FFFFFF"><path d="m358.74,0h-214.05C64.78,0,0,64.78,0,144.7v222.61c0,79.91,64.78,144.7,144.69,144.7h214.05c79.91,0,144.7-64.78,144.7-144.7v-222.61c0-79.91-64.78-144.69-144.69-144.69ZM51.37,144.7c0-51.46,41.86-93.32,93.32-93.32h214.05c51.46,0,93.32,41.86,93.32,93.32v222.61c0,51.46-41.86,93.32-93.32,93.32h-214.05c-51.46,0-93.32-41.86-93.32-93.32v-222.61Z"/><path class="cls-1" d="m251.72,387.85c72.7,0,131.85-59.15,131.85-131.85s-59.15-131.86-131.85-131.86-131.85,59.15-131.85,131.86,59.15,131.85,131.85,131.85Zm0-222.61c50.04,0,90.75,40.71,90.75,90.76s-40.71,90.76-90.75,90.76-90.75-40.71-90.75-90.76,40.71-90.76,90.75-90.76Z"/><circle class="cls-1" cx="387.43" cy="120.3" r="29.54"/></svg>');
    position: relative;
    z-index: 999;
}
.icon_mail::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 401.88" fill="%23ffffff"><path d="M510.68,57.21c-2.31-11.63-7.46-22.26-14.66-31.05-1.52-1.92-3.1-3.63-4.82-5.35-12.76-12.82-30.66-20.81-50.21-20.81H71.02c-19.56,0-37.4,8-50.21,20.81-1.72,1.71-3.3,3.43-4.82,5.35-7.2,8.79-12.36,19.43-14.6,31.05-.92,4.49-1.39,9.12-1.39,13.81v259.83c0,9.97,2.11,19.55,5.88,28.2,3.5,8.26,8.65,15.73,14.93,22,1.59,1.59,3.17,3.04,4.89,4.49,12.29,10.17,28.15,16.32,45.32,16.32h369.96c17.18,0,33.11-6.14,45.32-16.38,1.72-1.39,3.3-2.84,4.89-4.43,6.27-6.27,11.42-13.74,14.99-22v-.06c3.77-8.65,5.81-18.17,5.81-28.14V71.02c0-4.69-.46-9.32-1.32-13.81ZM46.51,46.51c6.35-6.34,14.87-10.18,24.51-10.18h369.96c9.65,0,18.24,3.84,24.51,10.18,1.12,1.13,2.18,2.39,3.11,3.64l-193.91,169c-5.35,4.69-11.95,7-18.7,7s-13.28-2.32-18.7-7L43.47,50.07c.86-1.25,1.92-2.44,3.04-3.57ZM36.33,330.86V87.67l140.32,122.41-140.25,122.29c-.07-.46-.07-.99-.07-1.51ZM440.98,365.53H71.02c-6.28,0-12.16-1.65-17.17-4.55l147.98-128.96,13.82,12.02c11.56,10.05,26.03,15.13,40.36,15.13s28.87-5.09,40.43-15.13l13.81-12.02,147.92,128.96c-5.02,2.9-10.9,4.55-17.18,4.55ZM475.67,330.86c0,.53,0,1.05-.07,1.52l-140.25-122.21,140.32-122.42v243.12Z"/></svg>');
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    content: '';
    z-index: 10;
    height: 23.547px;
    width: 30px;
    background-size: cover;
}
.btn_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:72px;
    height: 264px;
    background: var(--color-blk);
    color: #fff;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 100;
    transform: translateY(-50%);
    border-radius: 8px 0 0 8px;
    text-decoration: none;
    transition: .2s;
}
.btn_contact span {
    font-size: 20px;
    font-weight: 600;
    writing-mode: vertical-rl;
    padding: 4px;
}
.btn_contact:hover {
    background: var(--color-brw);
}
.btn_contact span:last-child {
    transform: translateX(-2px);
}
.hamburger {
    display: flex;
    width: 88px;
    height: 88px;
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    left:24px;
    z-index: 1000;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
.hamburger:hover {
    filter: brightness(1.2);
}
.hamburger__icon {
    position: relative;
    margin-top: 4px;
    margin-bottom: 8px;
}
.hamburger__icon,
.hamburger__icon:after,
.hamburger__icon::before {
    display: block;
    width: 62px;
    height: 3px;
    background-color: var(--color-brw);
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
    -webkit-transition-property: background-color, -webkit-transform;
    transition-property: background-color, transform;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.hamburger__icon:before,
.hamburger__icon:after {
    position: absolute;
    content: "";
}
.hamburger__icon:before {
    top: -7px;
}
.hamburger__icon:after {
    top: 7px;
}
.hamburger__icon,
.hamburger.active .hamburger__icon {
    background-color: transparent;
}
.hamburger.active:hover .hamburger__icon {
    filter: brightness(.9);
}
.hamburger.active .hamburger__icon:before,
.hamburger.active .hamburger__icon:after {
    background-color: #fff;
    width: 40px;
}
.hamburger.active .hamburger__icon:before {
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    -webkit-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
.hamburger.active .hamburger__icon:after {
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    -webkit-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}
.fat-nav {
    top: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    width: 100%;
    max-width: 380px;
    height: 100%;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    backdrop-filter: blur(16px);
    background: var(--color-brw);
    display: none;
    transition: .3s cubic-bezier(0.6, 0.2, 0.1, 1);
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.fat-nav__wrapper {
    display: flex;
    justify-content: right;
    width: 100%;
    margin: 0 auto;
    padding: 88px 0 0;
    height: 100%;
    overflow: auto;
    z-index: 1;
    box-sizing: border-box;
}
.fat-nav.active {
    display: block;
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
.fat_nav_menu_li {
    width: 100%;
}
.fat_nav_menu_li li {
    width: 300px;
}
.fat-nav__wrapper a {
    display: flex;
    align-items: center;
    padding: 28px 16px 22px 0;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #b39f93;
    transition: .2s;
}
.fat-nav__wrapper a:hover {
    border-bottom: 1px solid #FFF;
}
.fat-nav__wrapper a span {
    display: inline-block;
    font-family: var(--font-sub);
    font-size: 12px;
    font-weight: 400;
    color: #b39f93;
    padding-left: 8px;
}
.fat-nav .header_menu a {
    position: absolute;
    top: 18px;
    right: -34px;
}
a[name] {
    display: inline-block;
    margin-top: -80px;
    padding-top: 80px;
}
.btn {
    display: block;
    width: fit-content;
    padding: 24px 72px 18px;
    border-radius: 64px;
    background: var(--color-ylw);
    border: 2px solid var(--color-brw);
    color: var(--color-brw);
    font-size:24px;
    font-weight: 600;
    text-decoration: none;
}
.wrapper {
    width: 86%;
    max-width: var(--max_width);
    margin: 0 auto;
}
.wrapper_md{
    width: 86%;
    max-width: var(--md_width);
    margin: 0 auto;
}
header {
    display: flex;
    justify-content: flex-end;
    z-index: 1;
    width: 100%;
    max-width: 1808px;
    margin: 0 auto;
}
header h1 {
    text-align: right;
    font-size: 64px;
    font-weight: 600;
    line-height: .6em;
    letter-spacing: .08em;
    padding: 80px 56px 0 0;
}
header h1 span:first-child{
    display: inline-block;
    font-size: 20px;
    padding-right: 16px;
    transform: translateY(-12px);
}
header h1 span:last-child{
    display: inline-block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .04em;
    padding-right: 16px;
}
.header_menu {
    position: fixed;
    top:0;
    left:0;
    z-index: 10;
    padding: 23px 0 0 122px
}
.feature {
    width: 100%;
    max-width: 1808px;
    margin: -72px auto var(--section_space);
    z-index:0;
}
.feature .feature_img {
    width: 1000px;
    position: absolute;
    top:0;
    right: 0;
    z-index: 0;
}
.infiniteslide_wrap {
    width: 50%;
    position: absolute;
    top: 230px;
    left: 0;
}
.infiniteslide div {
    width: 288px;
    margin: 0;
}
.infiniteslide div img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.feature .header {
    display: flex;
    align-items: end;
    height: 1000px;
    padding-bottom: 24px;
    z-index: 1;
}
.header_content .h {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.4em;
    margin-bottom: 16px;
}
.header_content .h span{
    letter-spacing: -0.05em;
}
.header_content .sub {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-brw);
    margin-bottom: 32px;
}
.content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 48px auto 0;
}
.content .txt{
    width: calc(100% - 440px);
}
.content .data {
    width: 20%;
}
.content .data dl {
    display: flex;
    padding: 6px 0 6px 24px;
    border-left: 4px solid var(--color-brw);
}
.content .data dl dt,
.content .data dl dd{
    font-size: var(--font-size-n);
}
.content .data dl dt::after {
    content: '：';
}
.editor_content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: var(--section_space);
}
.editor_content .txt,
.editor_content .img {
    width: 46%;
}
.editor .txt {
    padding-top: 280px;
}
.h_round .h_round_content{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.h_round {
    display: flex;
    align-items: center;
    justify-content: center;
    width:208px;
    height: 208px;
    background: var(--color-brw);
    border-radius: 104px;
}
.h_round::before,.h_round::after {
    content:'';
    display: block;
    width: 232px;
    height: 207px;
    border-top: 1px solid var(--color-brw);
    border-bottom: 1px solid var(--color-brw);
    position: absolute;
    top: 0;
    left: -12px;
    transform-origin: center;
    opacity: .5;
}
.h_round::after {
    width: 207px;
    height: 232px;
    border: 0;
    border-left: 1px solid var(--color-brw);
    border-right: 1px solid var(--color-brw);
    top: -12px;
    left: 0;
}
h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1em;
    color: var(--color-brw);
    margin-bottom: 4px;
}
.h_round h2 {
    color: #fff;
    writing-mode: vertical-rl;
    white-space: nowrap;
    margin-bottom: 4px;
    transform: translateX(-4px);
}
.h_round_en,
.h2_en {
    font-family: var(--font-sub);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    line-height: 1.4em;
    color: #fff;
}
.editor .txt .h_round {
    margin: 0 auto 72px;
}
.editor .txt h3 {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}
.editor .h_round {
    position: absolute;
    top: 0;
    right: calc(23% - 104px);
}
.caption {
    font-size: var(--font-size-ss);
    line-height: 1.6em;
    text-align: center;
    margin: 16px 0;
}
.katagami {
    border-radius: 8px;
    overflow: hidden;
}
.katagami_mask {
    margin-bottom: var(--section_space);
    border-radius: 8px;
    overflow: hidden;
}
.information {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
    background: var(--color-brw);
    padding: 4px 16px 2px;
    border-radius: 0 0 4px 4px;
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}
.katagami h2{
    font-size: 32px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 48px;
    left: 40px;
    z-index: 1;
    transform: rotate(-2deg);
}
.katagami h2 span{
    display: inline-block;
    background: var(--color-org);
    padding: 16px 16px 12px;
    margin-bottom: 4px;
}
.katagami h2 span:first-child,
.katagami h2 span:nth-child(4){
    padding-right: 0;
}
.katagami h2 span:nth-child(2),
.katagami h2 span:nth-child(5){
    padding-left: 0;
}
.katagami_content {
    display: flex;
    flex-wrap: wrap;
}
.katagami_content > div {
    width: 50%;
    padding-top: 200px;
}
.katagami_content .txt p {
    font-size: var(--font-size-n);
    line-height: 1.6em;
    text-align: center;
    margin-bottom: 24px;
}
.katagami_content .txt p > span,
.katagami_copy span{
    display: inline-block;
}
.katagami_content .txt p span span{
    letter-spacing: -0.4em;
}
.katagami_content .txt {
    background-color: #ECE18F;
    background-image: url(images/grid.png);
    padding-left: 40px;
    padding-right: 40px;
}
.katagami_content .txt .icons {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 32px;
}
.katagami_content .txt .icons div {
    width: 16%;
}
.katagami_copy {
    font-size: var(--font-size-s);
    font-weight: 600;
    color: #fff;
    text-align: center;
    background: #4E6068;
    border-radius: 32px;
    margin: 0 auto 24px;
    padding: 12px 24px;
    width: fit-content;
}
.katagami_copy::after {
    content: '';
    display: block;
    background: #4E6068;
    width: 12px;
    height: 8px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    bottom: -7px;
    left: calc(50% - 6px);
}
.katagami_logo {
    width: 318px;
    margin: 0 auto 32px;
}
.katagami_content .btn_erea {
    background: url(images/ktgm_img.jpg);
    background-position: top left;
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 32px;
}
.katagami_content .btn_erea .btn{
    background: #fff;
}
.news {
    background-image: url(images/news_bg.jpg);
    background-size: cover;
    padding: 80px 0 120px;
}
.news_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.news_content .h_round {
    background: #fff;
}
.news_content .h_round h2 {
    font-size: 36px;
    color: var(--color-brw);
    letter-spacing: normal;
    writing-mode:horizontal-tb;
    margin-bottom: 4px;
    transform: translateX(0);
}
.news_content .h_round::before,
.news_content .h_round::after {
    border-color: #fff;
}
.news_content .h_round_en {
    color: var(--color-brw);
    text-align: center;
}
.news_content .news_list {
    width: calc(100% - 288px);
}
.news_content .news_list dl{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    padding: 24px 32px 20px;
    margin-bottom: 8px;
}
.news_content .news_list dl dt{
    font-size: 14px;
    font-weight: 800;
    color: var(--color-brw);
    padding-right: 32px;
}
.news_content .news_list dl dd{
    font-size: var(--font-size-n);
    padding-right: 32px;
    line-height: 1.6em;
}
.index {
    background-color: var(--color-brw);
    background-image: url(images/bg_brw2.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 56px;
    margin-bottom: var(--section_space);
}
.index .h_round {
    position: absolute;
    top:-80px;
    left: calc(50% - 104px);
}
.index_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 140px 0 0;
}
.index_content .txt {
    width: 58%;
    color: #fff;
}
.index_content .txt ul {
    margin-bottom: 48px;
}
.index_content .txt li {
    font-size: var(--font-size-n);
    line-height: 2em;
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: .5em;
}
.index_content .txt li::before {
    content: '・';
}
.index_content .txt h3{
    font-size: 24px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #fff;
}
.index_content .txt p{
    margin-bottom: 32px;
}
.index_content .sample {
    width: 36%;
}
.index_content .sample div{
    margin-bottom: 16px;
}
.index_content .sample div:last-child{
    margin-bottom: 0;
}
.original {
    margin-bottom: var(--section_space);
}
.original_book {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 48px;
}
.original .h_round {
    position: absolute;
    top: 0;
    right: 0;
}
.original .h_round h2 {
    transform: translateX(-14px);
}
.original_book .txt {
    width: 44%;
}
.original_book .txt h3 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1em;
    margin-bottom: 16px;
}
.original_book .txt h3 span{
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.original_book .txt .book_writter {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-brw);
    margin-bottom: 48px;
}
.original_book .img {
    width: 48%;
}
.writter {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-brw);
    margin-bottom: 32px;
}
.writter span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--color-brw);
    border-radius: 12px;
    margin-right: 12px;
}
.original_writter {
    display: flex;
    justify-content: space-between;
}
.original_writter .txt {
    width: 63%;
} 
.original_writter .img {
    width: 31%;
} 
.errata {
    padding: 120px 0;
    background-size: auto auto;
    background-color: rgba(151, 121, 101, 1);
    background-image: repeating-linear-gradient(-30deg, transparent, transparent 20px, rgba(158, 130, 111, 1) 20px, rgba(158, 130, 111, 1) 40px );
}
.errata_content::before,
.contact_content::before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background: #fff;
    position: absolute;
    top: -31px;
    left: calc(50% - 60px);
    clip-path: polygon(0 0, 100% 0, 100% 32px, 0 32px);
}
.errata_content,
.contact_content {
    width: 86%;
    padding: 80px 6%;
    background: #fff;
    border-radius: 8px;
}
/*.contact_content {
    padding: 80px 6% 120px;
}*/
.errata h2,
.contact_content h2{
    text-align: center;
}
.h2_en {
    color: var(--color-brw);
    margin-bottom: 56px;
}
.errata_content p {
    margin-bottom: 16px;
}
.errata_content .txt{
    margin-bottom: 40px;
}
.errata_content .txt:last-child {
    margin-bottom: 0;
}
.errata_h::before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--color-brw);
    border-radius: 8px;
    margin-right: 12px;
}
.errata_content .txt dl {
    border-top: 1px dashed var(--color-brw);
    margin-top: 16px;
    padding: 16px 0 0;
}
.errata_content .txt dl dt,
.errata_content .txt dl dd{
    font-size: var(--font-size-n);
    padding: 0 0 8px;
    line-height: 1.6em;
}
.errata_content .txt dl dd span {
    display: inline-block;
    font-weight: 600;
    margin-right: 1em;
}
.insta {
    background-image: url(images/insta_bg2.jpg);
    background-size: cover;
    background-position: bottom;
    padding: 160px 0;
}
.insta_content {
    width: 76%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
}
.insta_content a {
    color: #fff;
    text-decoration: none;
}
.follow_us {
    box-sizing:border-box;
    background: #fff;
    height: 200px;
    padding: 24px 0 0;
    text-align: center;
    color: var(--color-brw);
}
.insta_id {
    background:var(--color-brw);
    height: 200px;
    padding: 90px 0 0;
    text-align: center;
    color: #fff;
}
.follow_us a {
    margin: 0 auto;
}
.insta_h{
    font-size: 24px;
    font-weight: 600;
    line-height: 1em;
}
.insta_h span{
    font-size: 16px;
}
.insta_icon {
    width:160px;
    height: 160px;
    clip-path: circle(44% at 50% 50%);
    position: absolute;
    top: calc(50% - 80px);
    left: calc(50% - 80px);
}
footer {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-brw);
}
footer .img {
    width: 700px;
}
footer .img img {
    aspect-ratio: 5 / 5;
    object-fit: cover;
}
.footer_info {
    padding: 48px;
    color: #fff;
}
.footer_h{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
}
.footer_info .btn {
    margin-bottom: 48px;
}
.company_h {
    display: inline-block;
    font-size: 18px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid #fff;
}
.company_info {
    font-size: var(--font-size-ss);
    line-height: 2.2em;
    margin-bottom: 48px;
}
.copyright {
    font-family: var(--font-sub);
    font-size: var(--font-size-ss);
}
.footer_info_content {
    display: flex;
    gap: 48px;
}
.company_info a {
    color: #fff;
    text-decoration: none;
}
.company_info a:hover {
    text-decoration:underline;
}
.contact {
    padding-top: 0;
    width: fit-content;
    margin: 32px auto 80px;
    background: #e4e4e4;
    padding: 12px 0;
    border-radius: 16px;
}
/*.contact::before {
    content: '';
    display: block;
    width: 100%;
    height: 400px;
    background-color: var(--color-brw);
    background-image: url(images/insta_bg.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left:0;
    z-index: 0;
}*/
.contact_content {
    z-index: 1;
}
.contact_content p{
    text-align: center;
}
/* animation setting -------------------------------*/

.scl_slide-in-back{
    opacity: 0;
    transition: .01s;
    transition-delay: 1.3s;
}
.scl_slide-in-back.is-active{
    opacity: 1;
}
.scl_slide-in-mask::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-brw);
    clip-path: inset(0 100% 0 0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.scl_slide-in-mask.is-active::before {
    animation-name:slide-in-mask ;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: .5s;
    animation-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1);
}
@keyframes slide-in-mask {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    50% {
        clip-path: inset(0 0 0 0);
    }

    70% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}
.scl_fade-in-left {
    clip-path: inset(0 100% 0 0);
    translate: -5% 0;
    opacity: 0;
}
.scl_fade-in-left.is-active {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
    opacity: 1;
    transition: 1.5s cubic-bezier(0.6, 0.2, 0.1, 1);
    transition-delay: 0;
}
.scl_delay-1s.is-active {
    transition-delay: 1s;
}
.scl_h_round::before {
    transform: scaleX(0);
    transition: 1s cubic-bezier(0.6, 0.2, 0.1, 1);
}
.scl_h_round.is-active::before {
    transform: scaleX(1);
}
.scl_h_round::after {
    transform: scaleY(0);
    transition: 1s cubic-bezier(0.6, 0.2, 0.1, 1);
}
.scl_h_round.is-active::after {
    transform: scaleY(1);
}
.scl_h_round .h_round_content{
    transform: translateY(160px);
    transition: 1s cubic-bezier(0.6, 0.2, 0.1, 1);
    opacity: 0;
}
.scl_h_round.is-active .h_round_content {
    transform: translateY(0);
    opacity: 1;
}
.scl_h_round {
    transform: translateY(80px);
    transition: .8s cubic-bezier(0.6, 0.2, 0.1, 1);
    opacity: 0;
}
.scl_h_round.is-active {
    transform: translateY(0);
    opacity: 1;
}
.form {
    width: fit-content;
    margin: 0 auto;
}
.footer_contact {
    margin-bottom: 40px;
}
.footer_contact .mail_ads{
    position: relative;
    font-family: var(--font-sub);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    text-indent: 32px;
}
.footer_contact .icon_mail::before{
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left:0;
    width: 24px;
    height: 18.84px;
}
.contact_tools {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}
.contact_tools a,.contact_tools div {
    font-size: var(--font-size-s);
    font-weight: 600;
    padding: 8px 8px 6px;
    width: 180px;
    text-align: center;
    color: var(--color-brw);
    background: #fff;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: .2s;
}
.copy_ads {
    position: relative;
}
#message {
    display: block;
    width: 180px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ylw);
    text-align: center;
    position: absolute;
    bottom: -24px;
    left: 184px;
    opacity: 0;
}
.contact_tools a:hover,.contact_tools div:hover {
    background-color: var(--color-ylw);
}
@media screen and (max-width: 1512px) {/*-------------------*/
.content .data  {
    width: calc(86% - 800px);
}
.content .txt {
    width: calc(1000px - 8%);
}
}@media screen and (max-width: 1440px) {/*------------------*/
.feature .feature_img {
    position: relative;
    margin: 0 0 0 auto;
}
.infiniteslide_wrap {
    width: 46%;
    top: 214px;
}
.feature .header {
    height: unset;
    padding-bottom: 24px;
    margin-top: -268px;
    z-index: 1;
}
.content {
    margin: 32px auto 0;
}
.feature .feature_img {
    width: 64%;
}
.infiniteslide_wrap {
    width: 46%;
    top: 200px;
}
.content .txt {
    width: 66%;
}
.content .data {
    width: 30%;
}
.editor.wrapper,
.katagami_mask {
    max-width: 1040px;
}
.editor .h_round {
    position: relative;
    top: unset;
    right:unset;
    margin: 0 auto 72px;
}
.editor_content {
    align-items: center;
}
.editor_content .txt {
    padding-top: 0;
}
.editor .txt h3 {
    margin-bottom: 48px;
}
}@media screen and (max-width: 1360px) {/*------------------*/
:root {
    --section_space :80px;
      }
header h1 {

    padding: 80px 0 0 0;
}
header {
    width: 86%;
    max-width: var(--max_width);
}
.feature .header {
    height: auto;
    padding-bottom: 24px;
    margin-top: -122px;
    z-index: 1;
}
.infiniteslide_wrap {
    width: 40%;
    top: 246px
}
.infiniteslide div {
    width: 208px;
    margin: 0;
}
.content {
    flex-direction: column;
    gap: 40px;
    margin: 24px auto 0;
}
.content .txt,
.content .data {
    width: 100%;
}
.feature {
    margin-top: -64px;
    margin-bottom: 40px;
}
.editor_content {
    align-items: start;
}
header h1 {
    font-size: 56px;
}
.btn_contact {
    width: 64px;
    height: 228px;
}
.btn_contact span {
    font-size: 18px;
}
.original .h_round {
    position: relative;
    margin: 0 auto 56px;
}
.original_book {
    align-items: start;
}
.original_book .txt {
    width: 46%;
}
.original_book .img {
    width: 44%;
}
footer .img {
    width: 600px;
}
footer .img img {
    aspect-ratio: 10 / 9;
}
.btn {
    padding: 20px 56px 16px;
    font-size: 20px;
}
.btn {
    font-size: 20px;
}
.katagami_content > div {
    padding-top: 180px;
}
.katagami h2 {
    font-size: 24px;
}
}@media screen and (max-width: 1260px) {/*------------------*/
.index_content {
    flex-direction: column;
}
.index_content .txt {
    width: 100%;
}
.index_content .sample {
    width: 100%;
    display: flex;
    gap: 16px;
    margin: 40px 0;
}
}@media screen and (max-width: 1060px) {/*------------------*/
:root {
    --font-size-l: 1.8rem;
    --font-size-n: 1.6rem;
    --font-size-s: 1.4rem;
    --font-size-ss: 1.4rem;
    --section_space :80px;
}
.feature .feature_img {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
header h1 {
    font-size: 48px;
}
.feature {
    margin-top: -56px;
}
.infiniteslide_wrap {
    width: 100%;
    max-width: 1000px;
    top: unset;
    position: relative;
    margin: 0 auto 40px;
}
.feature .header {
    padding-bottom: 0;
    margin-top: 40px;
}
.header_content {
    width: 100%;
}
.header_content .btn {
    font-size: 20px;
    margin: 0 0 0 auto;
}
.h_round {
    width: 168px;
    height: 168px;
}
.h_round::before{
    width: 192px;
    height: 168px;
}
.h_round::after{
    width: 168px;
    height: 192px;
}
.h_round_en, .h2_en {
    font-size: 12px;
}
.h_round h2 {
    font-size: 32px;
    margin-bottom: 4px;
}
.katagami_content {
    flex-direction: column;
}
.katagami_content > div {
    width: 100%;
}
.katagami h2 {
    font-size: 24px;
    left: 50%;
    transform: translateX(-50%);
}
.katagami h2 {
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: fit-content;
    position: relative;
    margin-bottom: -120px;
    text-align: center;
}
.katagami_content > div {
    padding-top: 200px;
}
.katagami_content .btn_erea {
    display: none;
}
.katagami_content .txt .icons div {
    width: 14%;
}
.news_content .h_round h2 {
    font-size: 24px;
}
.news_content .news_list {
    width: calc(100% - 248px);
}
.index .h_round {
    top: -60px;
    left: calc(50% - 84px);
}
.index_content .txt h3 {
    font-size: 20px;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.original_book .txt h3 {
    font-size: 40px;
}
.original_book .txt h3 span {
    font-size: 20px;
}
.original_book .txt .book_writter {
    font-size: 18px;
}
h2 {
    font-size: 40px;
}
.errata_content, .contact_content {
    padding: 60px 6% 40px;
}
.h2_en {
    margin-bottom: 40px;
}
footer .img {
    display: none;
}
.insta {
    padding: 100px 0;
}
.contact_content p {
    text-align: left;
}
.contact_content br {
    display: none;
}
}@media screen and (max-width: 768px) {/*------------------*/
:root {
       --section_space :40px;
   }
header h1 {
    font-size: 40px;
}
.feature {
    margin-top: -56px;
}
.infiniteslide div {
    width: 168px;
}
.header_content .h {
    font-size: 32px;
    margin-bottom: 8px;
}
.header_content .sub {
    font-size: 16px;
    margin-bottom: 24px;
}
.content .data dl {
    padding: 4px 0 4px 24px;
}
.h_round {
    width: 148px;
    height: 148px;
}
.h_round::before {
    width: 172px;
    height: 148px;
}
.h_round::after {
    width: 148px;
    height: 172px;
}
.editor .h_round {
    margin: 0 auto 40px;
}
.editor_content {
    align-items: start;
    flex-direction: column;
    gap: 40px;
}
.editor_content .txt {
    width: 100%;
}
.editor_content .img {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}
.editor .txt h3 {
    margin-bottom: 24px;
}
.katagami h2 {
    font-size: 20px;
}
.btn_contact {
    width: 54px;
    height: 200px;
}
.btn_contact span {
    font-size: 16px;
    transform: scale(.7);
}
.btn_contact span:last-child {
    transform: translateX(-2px) translateY(-10px);
}
.news_content {
    flex-direction: column;
    gap: 32px;
}
.news {
    padding: 40px 0 80px;
}
.news_content .news_list {
    width: 100%;
}
.news_content .news_list dl dd {
    padding-right: 0;
}
.news_content .news_list dl {
    flex-direction: column;
    align-items: start;
    gap: 4px;
}
.index .h_round {
    top: -40px;
    left: calc(50% - 74px);
}
.index_content {
    padding: 100px 0 0;
}
.h_round_en, .h2_en {
    line-height: 1em;
}
.original_book,
.original_writter {
    flex-direction: column;
    gap: 40px;
}
.original_book .txt,
.original_writter .txt {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.original_book .img,
.original_writter .img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
}
.original_book .txt h3 {
    font-size: 32px;
    text-align: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
}
.original_book .txt .book_writter {
    font-size: 16px;
    text-align: center;
    margin-bottom: 32px;
}
.writter {
    font-size: 20px;
    margin-bottom: 24px;
}
h2 {
    font-size: 32px;
}
.errata {
    padding: 56px 0;
}
.contact {
    margin-top: 32px;
    padding-top: 48px;
}
.contact_content {
    padding: 40px 6% 40px;
}
.h2_en {
    margin-bottom: 32px;
}
header h1 span:first-child {
    font-size: 16px;
    padding-right: 8px;
    transform: translateY(-8px);
}
header h1 span:last-child {
    font-size: 16px;
    padding-right: 8px;
    margin-top: 12px;
    transform: translateY(-8px);
}

}@media screen and (max-width: 640px) {/*------------------*/
:root {
    --font-size-l: 1.6rem;
    --font-size-n: 1.4rem;
    --font-size-s: 1.2rem;
    --font-size-ss: 1.2rem;
    --section_space :56px;
    }
.fat-nav .header_menu a {
    top: 10px;
}
header h1 {
    font-size: 32px;
}
header h1 span:first-child {
    display: inline-block;
    font-size: 16px;
    padding-right: 8px;
    transform: translateY(-6px);
}
.feature {
    margin-top: -36px;
}
.infiniteslide div {
    width: 128px;
}
.header_content .h {
    font-size: 24px;
}
.header_content .sub {
    font-size: 14px;
}
.header_content .btn {
    font-size: 16px;
    padding: 16px 40px 14px;
}
.katagami h2 {
    font-size: 16px;
}
.katagami h2 span {
    padding: 12px 12px 10px;
    margin-bottom: 2px;
}
.katagami h2 span:nth-child(4),
.katagami h2 span:nth-child(5) {
    padding: 12px 12px 10px;
}
.editor .txt h3 {
    margin-bottom: 16px;
    font-size: 1.8rem;
}
.index_content .sample div {
    margin-bottom: 0;
}
.index_content .sample {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}
.index {
    padding-bottom: 40px;
}
.original_book .txt h3 span {
    font-size: 16px;
}
.original_book .txt h3 {
    font-size: 24px;
}
.footer_h {
    font-size: 16px;
    margin-bottom: 16px;
}
.company_h {
    font-size: 14px;
}
.contact {
    margin-top: 16px;
}

:root {
     --section_space :32px;
}
header h1 {
    font-size: 24px;
}
header h1 span:first-child {
    font-size: 14px;
    transform: translateY(-3px);
}
.feature {
    margin-top: -38px;
}
header h1 span:last-child {
    font-size: 14px;
    padding-right: 4px;
    margin-top: 12px;
}
.header_content .h {
    font-size: 20px;
}
.h_round {
    width: 128px;
    height: 128px;
}
.h_round::before {
    width: 150px;
    height: 128px;
}
.h_round::after {
    width: 128px;
    height: 150px;
}
.h_round h2 {
    font-size: 24px;
    transform: translateX(-13px);
}
.index .h_round h2,
.original .h_round h2 {
    transform: translateX(-10px);
}
.information {
    font-size: 12px;
    left: 16px;
}
.katagami h2 {
    font-size: 14px;
    z-index: 3;
}

.katagami_content > div {
    padding-top: 180px;
}
.katagami_content .txt p {
    margin-bottom: 8px;
}
.katagami_content .txt .icons div {
    width: 20%;
}
.katagami_content .txt .icons {
    margin-bottom: 16px;
}
.katagami_logo {
    width: 86%;
    max-width: 320px;
    margin: 0 auto 32px;
}
.btn_contact span:last-child {
    display: none;
}
.btn_contact {
    width: 54px;
    height: 54px;
    padding-top: 5px;
    border-radius: 27px;
    right: 8px;
    bottom: 8px;
    top: unset;
}
.hamburger {
    width: 72px;
    height: 72px;
    left: 8px;
}
.hamburger__icon, .hamburger__icon:after, .hamburger__icon::before {
    width: 48px;
}
.header_menu {
    padding: 15px 0 0 88px;
}
header h1 {
    padding: 64px 0 0 0;
}
.header_content .btn {
    margin: 0 auto;
}
.index {
    background-repeat:repeat; 
    background-size: 1000px 666px;
    background-position: center center;
}
.original .h_round h2 {
    transform: translateX(-18px);
}
.original_book {
    margin-bottom: 24px;
}
.writter {
    margin-bottom: 16px;
}
.writter span::before {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.errata_content, .contact_content {
    padding: 32px 6% 24px;
}
.errata_h::before {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}
h2 {
    font-size: 24px;
}
.h2_en {
    margin-bottom: 24px;
}
.insta_h {
    font-size: 20px;
}
.insta_h span {
    font-size: 14px;
}
.insta_icon {
    width: 140px;
    height: 140px;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
}
.follow_us {
    padding: 8px 0 0;
    height: 160px;
}
.insta_id {
    height: 160px;
    padding: 80px 0 0;
}
.footer_info {
    padding: 32px;
}
.footer_info .btn {
    font-size: 1.6rem;
    padding: 16px 32px 14px;
    margin: 0 auto 32px;
}
.footer_h {
    text-align: center;
}
.footer_info_content {
    flex-direction: column;
    gap: 0;
}
.company_info {
    margin-bottom: 24px;
}
.footer_info {
    width: 100%;
}
.errata_content .txt dl {
    margin-top: 8px;
    padding: 8px 0 0;
}
.errata_content .txt dl dd {
    padding: 0;
}
.insta {
    padding: 60px 0;
}
.news_content .news_list dl {
    padding: 16px 24px 14px;
}
.index .h_round {
    left: calc(50% - 64px);
}
.index_content {
    padding: 80px 0 0;
}
.index_content .txt ul {
    margin-bottom: 24px;
}
.index_content .sample {
    margin: 0;
}
.index .btn {
    margin-top: 40px;
}
.original .h_round {
    margin: 0 auto 32px;
}
.original_book .txt .book_writter {
    margin-bottom: 24px;
}
.contact {
    margin: 32px auto 80px;
    padding: 8px 0;
}
.infiniteslide_wrap {
    margin: 0 auto 24px;
}
.feature .header {
    margin-top: 24px;
}
}