@charset "UTF-8";

/* BASE
------------------------------ */
:root {
--color-brown: #68463E;
--color-brown-light: #8F7771;
--color-orange: #FF5C00;
--color-yellow: #FFB801;
--color-pink: #EF4224;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #32393E;
font-size: 16px;
font-family: 'Mochiy Pop One', "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メxイリオ, Meiryo, sans-serif;
overflow-wrap: break-word;
font-feature-settings: "palt";
}

img, iframe {
outline: none;
vertical-align: bottom;
}

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

a {
text-decoration: none;
}

ul,li{
list-style: none;
}


/* atashinchi */
.atashinchi30th {
overflow: hidden;
}

.br-block{
display: none;
}

.atashinchi30th .contents-inner {
max-width: 1032px;
margin: 40px auto;
padding: 0 16px;
}

.head-logo-sec{
border-bottom: dotted 10px var(--color-brown-light);
padding-bottom: clamp(50px, 20%, 70px);
margin-bottom: clamp(50px, 20%, 70px);
}

.event-sec{
border-bottom: dotted 10px var(--color-brown-light);
padding-bottom: clamp(50px, 20%, 200px);
margin-bottom: clamp(50px, 20%, 150px);
}

/* 240930追加 */
.event-sec02{
border-style: none;
margin-bottom: clamp(50px, 20%, 150px);
}

.release-sec,
.event-special-sec,
.anime-sec,
.comic-sec{
/* border-bottom: dotted 10px var(--color-brown-light);
padding-bottom: clamp(50px, 20%, 140px); */
margin-bottom: clamp(50px, 20%, 140px);
}

.comic-sec{
border-bottom: none;
}

.head-logo{
display: grid;
justify-content: center;
justify-items: center;
row-gap: 40px;
}

#g-nav{
margin:26px 0 140px;
}

#g-nav-list ul{
display: flex;
justify-content: space-around;
font-size: clamp(30px,4.2vw,42px);
font-family: "M PLUS 1", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
}

#g-nav-list ul a{
color: var(--color-orange);
position: relative;
}

#g-nav-list ul a::before{
content: "";
display: inline-block;
position: absolute;
left: 0;
bottom: -7px;
width: 0;
height: 0;
border-radius: 5px;
background: var(--color-brown-light);
}

#g-nav-list ul a:hover::before{
content: "";
display: inline-block;
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
height: 5px;
border-radius: 5px;
background: var(--color-brown-light);
}

#g-nav-list ul .nav-close{
display: none;
}

.nav-flex{
display: none;
justify-content: center;
gap: 70px;
position: relative;
}

.atashinchi-family{
display: grid;
justify-content: center;
justify-items: center;
}

.anniversary-author{
font-size: clamp(26px,3.3vw,33px);
color: var(--color-orange);
text-align: center;
margin-top: clamp(50px,9vw,90px);;
}

.anniversary-author span{
font-size: clamp(22px,2.8vw,28px);
}

.event-inner{
text-align: center;
}

.event-inner h2 span{
font-size: clamp(28px,5.5vw,55px);
}

.event-img{
margin-top: clamp(35px,11vw,110px);
}

.position-l{
position: relative;
}

.event-deco01,
.event-deco02,
.event-deco03,
.event-deco04,
.event-deco05,
.event-deco06,
.event-deco07,
.event-deco08{
position: absolute;
}

.event-deco01{
top:5%;
left: 22%;
}

.event-deco02{
bottom:5%;
right: 11%;
}

.event-deco03{
top: -5%;
right: 25%;
}

.event-deco04{
top: 21%;
left: 7%;
}

.event-deco05{
top: 45%;
right: 0%;
}

.event-deco06{
bottom: 11%;
left: 6%;
}

.event-deco07{
bottom: 13%;
right: 0;
}

.event-deco08{
bottom: -12%;
left: 30%;
}

.event-txt{
margin-top: clamp(65px,13vw,130px);
}

.event-txt p{
font-size: clamp(26px,5.2vw,52px);
margin-bottom: clamp(30px,7vw,70px);
}

.event-txt p:last-of-type{
margin-bottom: 0;
}

.release-title{
text-align: center;
}

.release-title-sub{
position: relative;
right: -4%;
margin-top: clamp(17px,3.4vw,34px);
margin-bottom: clamp(34px,7.0vw,70px);
}

.release-inner-day{
color: var(--color-orange);
font-size: clamp(32px,5.8vw,58px);
margin-bottom: 50px;
}

.book-wrap{
margin-top: clamp(60px,8vw,80px);
}

.book-content{
display: flex;
justify-content: center;
align-items: center;
column-gap: 30px;
}

.book-content-sample{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.book-content-sample h4,
.book-content-sample h4.new-book,
.book-content-sample h4.new-book span{
font-size: clamp(25px,4.9vw,49px);
line-height: 1.5;
}

.book-content-sample img{
max-width: 100%;
width: fit-content;
}

.book-content-sample .sample-btn{
display: block;
font-size: clamp(20px,2.5vw,25px);
border-radius: 100vmax;
border: 3px solid #000;
color: #000;
padding: 10px 60px;
transition: box-shadow 0.2s;
}

.book-content-sample .sample-btn:hover{
box-shadow: 0px 2px 1.96px 0.04px rgba(0, 0, 0, 0.6);
}

.reservation-btn{
display: block;
font-family: 'Mochiy Pop One', sans-serif;
width: 100%;
max-width: 560px;
padding: 10px 70px;
font-size: clamp(26px,5.2vw,52px);
font-feature-settings: "palt";
color: #fff;
border-radius: 100vmax;
background-color: var(--color-orange);
transition: box-shadow 0.2s;
text-align: center;
margin-top: clamp(34px,6.0vw,60px);
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}

.reservation-btn:hover{
box-shadow: 0px 2px 1.96px 0.04px rgba(0, 0, 0, 0.6);
background-color: var(--color-yellow)
}


.event-inner-special{
text-align: center;
}

.special-content{
margin-bottom: clamp(42px,8vw,80px);
position: relative;
}

.special-content h2{
margin-top: clamp(50px,14vw,140px);
margin-bottom: clamp(30px,7vw,70px);
}

.special-content01-01{
position: relative;
}

.special-content01-02,
.special-content01-03,
.special-content02-01,
.special-content02-02,
.special-content02-03,
.special-content03-01,
.special-content03-02{
position: absolute;
}

.special-content01-01{
left: -2%;
margin-top: 3%;
}

.special-content01-02{
top: 30%;
left: 6%;
}

.special-content01-03{
top: 24%;
right: 3%;
}

.special-content02-01{
top: 42%;
right: 2%;
}

.special-content02-02{
bottom: 35%;
left: 3%;
}

.special-content02-03{
bottom: 34%;
right: 8%;
}

.special-content03-01{
bottom: 18%;
left: 5%;
}

.special-content03-02{
bottom: -3%;
right: 10%;
}

.event-img-special h2 span{
font-size: clamp(28px,5.5vw,55px);
}

.event-inner-special p{
font-size: clamp(28px,5.5vw,55px);
color: var(--color-orange);
margin-top: 42px;
}

.anime-inner{
text-align: center;
}

.anime-inner h2{
margin-top: clamp(48px,9.7vw,97px);
margin-bottom: clamp(30px,6.0vw,60px);
}

.anime-inner h2 span {
font-size: clamp(28px,5.5vw,55px);
}

.atashinchi_youtube_wrap{
display: inline-block;
}

.atashinchi_youtube_wrap figcaption{
text-align: right;
}

.anime-inner .atashinchi_youtube{
transition: box-shadow 0.2s;
}
.anime-inner .atashinchi_youtube:hover {
box-shadow: 0 8px 8px rgba(0, 0, 0,.4);
}

.youtube-txt{
font-size: clamp(18px,3.2vw,36px);
margin-top: clamp(16px,3.0vw,30px);
}

.youtube-txt a{
color:#32393E ;
display: inline-block;
position: relative;
}

.youtube-txt a::before{
content: "";
display: inline-block;
position: absolute;
left: 0;
bottom: -7px;
width: 0;
height: 0;
border-radius: 5px;
background: var(--color-brown-light);
}

.youtube-txt a:hover::before{
width: 100%;
height: 5px;
}

.episode{
font-size: clamp(26px,5.2vw,48px);
color: var(--color-orange);
margin-top: clamp(50px,10vw,100px);
margin-bottom: clamp(60px,12vw,120px);
}

.atashinchi30th .banner {
text-align: center;
}

.atashinchi30th .banner .banner-item a{
transition: box-shadow 0.2s;
}
.atashinchi30th .banner .banner-item a:hover {
box-shadow: 0 8px 8px rgba(0, 0, 0,.4);
}

.comic-inner{
text-align: center;
}

.banner-top{
margin-top: clamp(90px,13vw,130px);
}


.atashinchi30th .lead-uline {
background: linear-gradient(to bottom, transparent 0%, transparent 50%, #FFF1A2 50%, #FFF1A2 90%,transparent 90%);
}


/* footer */
footer {
padding: 16px;
font-family: "游ゴシック Medium", "Yu Gothic Medium", YuGothicM, 游ゴシック体, YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メxイリオ, Meiryo, sans-serif;
font-size: 12px;
text-align: center;
}

footer svg {
margin-top: 16px;
}

.kikaku_img {
width: 80%;
padding-bottom: 4%;
}

.h-shadow{
transition: all 0.2s;
}
.h-shadow:hover{
filter: drop-shadow(5px 5px 5px #0006);
}

/* 20250501追加　*/
.intro-txt2025 {
    margin: 20px auto 80px;    
}

.intro-txt2025 p {
    font-family: "M PLUS 1", sans-serif;
    font-size: 28px;
    text-align: center;
}
/* スマホ表示時 */
@media (max-width: 767px) {
    .intro-txt2025 p {
          font-size: 20px; /* スマホでは文字サイズを小さく */
        }
}
    
/* responsive */
@media screen and (max-width: 700px) {

.atashinchi30th .contents-inner {
margin-top: 10px;
}
.atashinchi30th .logo-img {
margin-bottom: 0;
}
.atashinchi30th .hero {
margin-bottom: 0;
}
.atashinchi30th .hero-title,
.atashinchi30th .hero-ready {
width: 70%;
margin: 0 auto 10px;
}
.atashinchi30th .hero-ready {
width: 60%;
}
.atashinchi30th .hero-img {
width: 80%;
margin: 0 auto;
}
.atashinchi30th .lead {
line-height: 1.5;
}

.atashinchi30th .lead br {
display: none;
}

.atashinchi30th .banner {
flex-direction: column;
gap: 24px;
}

.br-block{
display: block;
}
#g-nav{
margin:0;
position:fixed;
z-index: 999;
top:-120%;
left:0;
width:100%;
height: 70vh;/*ナビの高さ*/
background:#fff;
transition: all 0.6s;
border: orange 3px solid;
}

#g-nav.panelactive{
top: 0;
}

#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999; 
width: 100%;
height: 70vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav ul {
flex-direction: column;
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

#g-nav li{
list-style: none;
text-align: center; 
margin-bottom: 0;
}

#g-nav li a{
color: var(--color-orange);
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

#g-nav-list ul .nav-close{
display: block;
border-radius: 100vmax;
background: #fff;
color: #000;
padding: 5%;
border: solid 3px #000;
margin-top: 20%;
cursor: pointer;
}

#g-nav-list ul a:hover::before {
height: 0;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
cursor: pointer;
}

.nav-flex{
display: flex;
justify-content: center;
position: relative;
margin-top: 3%;
}

.sp-family{
margin-top: 5%;
}

.event-img img:first-child{
width: 70%;
}

.event-deco01,
.special-content01-02{
max-width: 11px;
}

.event-deco02,
.special-content01-03{
max-width: 35px;
}

.event-deco03,
.special-content02-01{
max-width: 10px;
}

.event-deco04,
.special-content02-02{
max-width: 31px;
}

.event-deco05,
.special-content02-03{
max-width: 9px;
}

.event-deco06,
.special-content03-01{
max-width: 11px;
}

.event-deco07,
.special-content03-02{
max-width: 34px;
}

.event-deco08{
max-width: 34px;
}

.release-title-sub {
width: 50%;
}

.speech03,
.speech04{
    width: 80%;
}

.book-content {
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}

.reservation-btn{
width: 80%;
padding: 10px 20px;
}

.special-content01-01{
width: 50%;
left: -5%;
}


.anime-inner .speech_anime,.comic-inner h2 img{
width: 80%;
}

.book-content-sample h4.new-book{
font-size: clamp(50px,6vw,60px);
line-height: 1.1;
}
.book-content-sample h4.new-book span{
font-size: clamp(30px,4vw,40px);
}
}

@media screen and (max-width: 320px) {
#g-nav {
height: 90vh;
}
#g-nav.panelactive #g-nav-list {
height: 90vh;
}
}

/* 20250321追加分 */
.special-content .official_download{
font-size: clamp(24px,4vw,40px);
color:#8F7771;
margin-bottom: clamp(20px,5.5vw,55px);
}

.fanbook_img{
margin-bottom: clamp(20px,4vw,40px);
}

@media screen and (max-width: 700px) {
.fanbook_img{
width: 80%;
}
}

.fanbook_list{
font-size: clamp(18px,2.4vw,24px);
max-width: 554px;
width: 100%;
text-align: left;
margin-inline: auto;
margin-bottom: clamp(20px,4vw,40px);
}

.fanbook_list li:nth-child(-n+3){
margin-bottom: clamp(1.6px,2vw,20px);
}

.fanbook02 figcaption{
font-family: noto-sans-jp, sans-serif;
max-width: 534px;
width: 100%;
margin-inline: auto;
text-align:left;
}
.fanbook_img02{
margin-bottom: clamp(20px,4vw,40px);
}

.special-content  .official_book_txt{
font-size: clamp(18px,2.7vw,27px);
margin-top: 0;
margin-bottom: clamp(20px,4vw,40px);
}

.download_group .download_txt{
font-size: clamp(18px,2.7vw,27px);
color: #8F7771;
}

.download_btn{
font-size: clamp(18px,2.7vw,27px);
display: inline-block;
padding: 20px 60px;
background-color: var(--color-orange);
color: #fff;
border-radius: 96px;
box-shadow: 10px 10px 0px 0px #00000040;
}

.download_btn:hover{
box-shadow: none;
}

.download_group .download_group_txt{
color: #000;
font-size: clamp(14px,2.4vw,24px);
margin-top: 0;
}

.download_group-mb8{
margin-bottom:8px;
}

.download_group-mb{
margin-bottom: clamp(24px,3.2vw,32px);
}

.preparation_wrap .preparation_head{
font-size: clamp(18px,2.7vw,27px);
color: #8F7771;
}

.preparation_item{
    max-width: 525px;
    width: 100%;
    margin-inline: auto;
    text-align: left;
}

.preparation_item .preparation_list {
    display: none;
    padding: 15px 15px 0;
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;
}

.preparation_item .item_lists {
    cursor: pointer;
    padding: 10px;
    background: #FCEEED;
    color: #000;
    border-radius: 5px;
    position: relative;
    font-size: clamp(16px,2.4vw,24px);
    margin-top: 24px;
}

.preparation_item .item_lists::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    width: 15px;
    height: 15px;
    border-right: 2px solid var(--color-orange);
    border-bottom: 2px solid var(--color-orange);
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s;
}

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

.preparation_item .item_lists::after {
content: '';
position: absolute;
right: 15px;
top: 50%;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-orange);
border-bottom: 2px solid var(--color-orange);
transform: translateY(-50%) rotate(45deg);
transition: transform 0.3s;
}
}



.preparation_item .item_lists.active::after {
transform: translateY(-30%) rotate(-135deg);
}

.preparation_sub{
margin: 24px 0;
}

.preparation_sub:last-child{
margin: 24px 0 0;
}

.preparation_sub a{
color: var(--color-orange);
} 

.preparation_sub a span{
color:#000;
} 

.preparation_sub a:hover{
text-decoration: underline;
} 

.preparation_item .preparation_list{
    font-size: clamp(16px,2.4vw,24px);
}

.preparation_item .preparation_list li {
    margin-bottom: 16px;
    position: relative;
}

.preparation_item .preparation_list li:last-child {
    margin-bottom: 0;
}

.preparation_item .preparation_list li:last-child {
    margin-bottom: 0;
}

.preparation_notice{
    font-size: clamp(12px,1.8vw,18px);
    font-family: noto-sans-jp, sans-serif;
    margin: clamp(24px,5.5vw,55px) 0;
}

.support_link{
    text-align: center;
    margin-bottom: clamp(24px,5.5vw,55px);
}

.support_link .download_btn{
background-color: #8F7771;
}

.topButton {
    display: none;
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 999999;
    cursor: pointer;
}