@charset "UTF-8";

/* =========================================================
   preference
========================================================= */
:root {
	  /* colors */
    --red: #e9360d;
	--yellow: #fff78c;
    --light-yellow: #fefbc6;
    --black: #000000;
    --gray: #999;
	--light-gray: #cccccc;
	--orange: #f8c240;
    --white: #fff;
}

/* =========================================================
   base
========================================================= */
html {
	scroll-behavior: smooth;
}
body{
    font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
    line-height: 1.7;
    color: var(--black);
	margin: 0;
}
ol, ul {
    list-style: none;
    list-style-type: none;
}

a {
	text-decoration: none;
	color: var(--black);
    text-decoration: none;
}
a:hover{
	opacity: 0.7;
}
section{
	margin: 0;
	padding: 4rem 0;
}
img{
    display: block;
	max-width: 100%;
	height: auto;
}
h2{
	margin: 1rem auto 2.8rem;
}
h2 img { display: block; margin: 0 auto; }

.fadeIn_up {
	opacity: 0;
	transform: translate(0, 50%);
	transition: 2s;
  }
  .fadeIn_up.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }


.w-container{
    width: min(92%, 1166px);
    margin: auto;
}

/* =========================================================
   header
========================================================= */
.header{
    height: 70px;
    background-color: #e7380d;
    background-image: radial-gradient(circle, #eb5f3c 4px, transparent 4px), radial-gradient(circle, #eb5f3c 4px, transparent 4px);
    background-position: 0 20px, 23px 31.5px;
    background-size: 46px 23px;
}

.header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

h1 { 
	margin: 0 1em 0 0;
 }


@media(min-width: 768px){
	.header{
		height: 120px;
	}

}

.site{
    display: flex;
    align-items: center;
    gap: 1em;
}
.sns{
    margin-left: auto;
	padding: .4em;
    display: flex;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 10px;
	gap: .4em;
}
.inner .sns img{
    width: 70%;
}

/* =========================================================
   navbtn
========================================================= */

.navbtn{
    padding: 0;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--red);
    font-size: 30px;
    position: absolute;
	right: 15px;
	top: 80px;
    z-index: 110;
}
.navbtn:before{
	content: "MENU";
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 700;
  	letter-spacing: 0.1em;
}

/* 追加：open 時は CLOSE に変更 */ 
.open .navbtn:before{ content: "CLOSE"; }

.navbtn .fa-times{
    display: none;
}

.open .navbtn .fa-bars{
    display: none;
}
.open .navbtn .fa-times{
    display: inline;
}


@media(min-width: 768px){
    .navbtn{
        display: none;
    }
}

/* navbtn:mobile */
@media (max-width: 767px){
    .nav{
        position: fixed;
        inset: 0;
        transform: translateX(100%);
        z-index: 100;
        background-color: #4e483ae6;
        transition: transform 0.3s;
		/* ← 追加 */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
    }
    .open .nav{
        transform: translateX(0);
    }

    body.open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .nav ul{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        color: var(--white);
		padding: 40px 0;
    }
	.nav li{
		border-bottom: var(--yellow) dotted 4px;
	}
	.nav span{
		color: var(--white);
		font-weight: 700;
	}
    .nav img{ display: none; }
}

/* navmenu：PC */
@media(min-width: 768px){
    .nav ul{
		margin: 0 auto;
        display: grid;
		align-items: baseline;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px 30px;
        color: #707070;
    }
    .nav span{ display: none; }
}



section{
    margin: 0;
    padding: 0;
}
.block{
    padding: 2rem 1rem;
}

/* =========================================================
   hero
========================================================= */
#hero{
    background-color: var(--yellow);
	padding-top: 2em;
}
#hero p { margin: 0; }
#hero img{
    width: 100%;
}

/* =========================================================
   news
========================================================= */

.newsBox{
	margin: 1em auto;
	padding: 1em;
	max-width: 1000px;
	width: 100%;
	height: 230px;
	background: #FFF;
	border: #f5f1e8 solid 1px;
}
@media screen and (min-width: 768px) {

	.newsBox{
		margin: 2rem auto;
        width: 80%;
	}
}


.newsBox .newsList{
	height: 230px;
	overflow-y: scroll;
    margin: 0;
    padding: 0; 
 }
.newsBox .newsList li{
	margin-bottom: 20px;
	padding-bottom: 1em;
	border-bottom: var(--light-gray) 2px solid;
	display: block;
    list-style: none;
	width: 100%;
 }

.newsBox .day{
	width: 110px;
	display: table-cell;
	font-size: 1rem;
	line-height: 1;
	color: var(--black);
	text-align: left;
 }
.newsBox .text{
	display: table-cell;
	font-size: 1rem;
	line-height: 1.2;
	text-align: left;
 }
.newsBox .text a{
	text-decoration: none;
    color: var(--red);
 }
.newsBox .text a:hover{
	color: var(--orange);
	text-decoration: none;
 }

@media (min-width: 786px) {
		.newsBox .day{
		font-size: 1.25rem;
		width: 150px;
		}
		.newsBox .text{
		display: table-cell;
		font-size: 1.5rem;
	}
}

/* =========================================================
   wave
========================================================= */

.wave {
	padding: 4em 0;
    width: 100%;
    height: auto; /* 区切り線の高さ */
    background-color: var(--light-yellow);

    /* 上下の波形を作るためのマスク設定 */
    --mask: radial-gradient(20px at 50% 28px, #000 99%, #0000 101%) calc(50% - 30px) 0/60px 51% repeat-x,
            radial-gradient(20px at 50% -13px, #0000 99%, #000 101%) 50% 15px/60px 51% repeat-x,
            radial-gradient(20px at 50% calc(100% - 28px), #000 99%, #0000 101%) calc(50% - 30px) 100%/60px 51% repeat-x,
            radial-gradient(20px at 50% calc(100% + 13px), #0000 99%, #000 101%) 50% calc(100% - 15px)/60px 51% repeat-x;
    
    -webkit-mask: var(--mask);
    mask: var(--mask);
}
.wave .w-container{
    height: 100%;
}

.book_main {
    display: flex;
    /*gap: 10px;*/
    align-items: flex-start;
	flex-direction: column; 
	margin: 0 auto;
	padding: 0 2rem;
}
.book_main p{
	margin: 0;
}

.book_dtl dt { 
	margin: 0 0 1em;
    font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
}
.book_dtl dt span{ 
	font-size: 80%;
}
.book_dtl dd { 
		margin: 0;
		font-size: 1.25rem;
	}
@media screen and (min-width: 768px) {
	.book_main{
		margin: 2rem 0;
		gap: 50px;
		flex-direction: row;
	}

	.book_dtl dl { 
		margin: 0 auto;
		
	}
	.book_dtl dt { 
		margin: 1rem 0;
		font-size: 2.6rem;
	}
    .book_dtl dd { 
		margin: 1rem 0;
		font-size: 2rem;
	}
}

.book_dtl dd { margin: 0 0 10px; }




.book_dtl .btn_both{
	margin-top: 1em;
	display: flex;
	justify-content: space-between;
	font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    gap: 10px;
}


/* =========================================================
   ebook
========================================================= */

.catch-container{
	margin-bottom: 2.8rem;
    display: flex;
}
.side {
	flex: 0 0 50px;
	max-width: 50px;
}
.center {
	flex: 1;
	word-break: break-word;
	text-align: center;
}
#ebook figure{
	margin-bottom: 4rem;
	text-align: center;
}
.btn_container{
    display: flex;
    justify-content: space-between;
    gap: 15px;
	text-align: center;
	width: 100%;
}
.btn_container img.line{
	border: solid 1px var(--light-gray);
}
/*
.btn_container p{
	flex: 1;
}
*/
.btn_container .e-lnk{
	margin-top: 1em;
	display: block;
	font-weight: 700;
}
@media screen and (min-width: 768px) {
	.btn_container .e-lnk{
		font-size: 2rem;
	}
}

.btn_container span a:hover{
	color: var(--red);
	text-decoration: underline;
}

/* 読み込み時アニメーション（対象限定＆低モーション対応済） */

/* フェードイン（img に直接適用） */
.anim-block .side img {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.anim-block.show .side img {
    opacity: 1;
    transform: translateY(0);
}

/* 左側（最初の .side） */
.anim-block .side:first-of-type img {
    animation: sway 3s ease-in-out infinite;
    animation-delay: 0.8s;
}

/* 右側（最後の .side） */
.anim-block .side:last-of-type img {
    animation: slideLR 4s ease-in-out infinite;
    animation-delay: 0.8s;
}

/* 左：揺れ */
@keyframes sway {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-10px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* 右：左右スライド */
@keyframes slideLR {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(15px); }
    100% { transform: translateX(0); }
}





@media (min-width: 786px) {
	.catch-container{
		margin: 0 auto 4rem;
		width: 90%;
	}
	.btn_container{
		margin: 0 auto 4rem;
		font-size: 1.5rem;
		text-align: center;
		width: 70%;
	}
	#oto .catch-container{
		margin: 0 auto 2rem;
	}
	#oto .btn_container{
		gap: 60px;
	}
	#ebook figure{
		margin: 0 auto 2rem;
		font-size: 2rem;
		width: 80%;
	}
	.center {
		font-size: 2rem;
	}
	.side {
		flex: 0 0 160px;
		max-width: 160px;
	}
}

/* =========================================================
   photo
========================================================= */
.book_grid{
	margin: 0 auto 4rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 30px 20px;
	grid-template-columns: repeat(2, minmax(125px, 1fr));

}
.book_grid ul{
	width: 100%;
}
.SP{ display: block;}
@media (min-width: 785px) {
	.book_grid{
		gap: 40px 10px;
	}
	.book_grid{
		grid-template-columns: repeat(3, minmax(250px, 1fr));
	}
	#photo .btn_container{ 
		font-size: 2rem;
		text-align: left;
	}
	.SP{ display: inline-block; margin-left: 2rem;}
}

/* =========================================================
   footer
========================================================= */

.footer{
	font-family: "Noto Sans JP", sans-serif;
	padding: 1rem 0;
	height: 80px;
    background-color: var(--red);
    background-image: radial-gradient(circle, #eb5f3c 4px, transparent 4px), radial-gradient(circle, #eb5f3c 4px, transparent 4px);
    background-position: 0 20px, 23px 31.5px;
    background-size: 46px 23px;
	color: var(--white);
}



.footer ul{
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1em;
}
.footer li{
	white-space: nowrap;
}
.footer a:link,.footer a:visited{
	color: var(--white);
}
.footer a:hover{
	text-decoration: underline;
}
/* * * page_top * * */
#page_top{
	position: fixed;
	right: 15px;
	bottom: 75px;
	z-index: 2000;
}
#page_top a{
	position: relative;
	display: block;
	text-decoration: none;
	opacity: 0.6;
}
#page_top a:hover{
	opacity:inherit;
	transform: translateY(-5px);
	cursor: pointer;
}


/* =========================================================
   hover
========================================================= */
.hover-down {
	transition: transform 0.3s ease;
	display: inline-block;
  }
  
  .hover-down:hover {
	transform: translateY(4px);
  }