@charset "Shift_JIS";

/* ==========================================================================
   1. Base Settings (全体設定)
   ========================================================================== */
body {
    font-family: 'Heebo', 'Noto Sans CJK JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 100vw;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
    background-color: #F3F0E6;
    overflow-x: hidden;
}

header {
    background-color: white;
    padding: 0;
}

#footer,
.footer_sns {
    text-align: center;
    font-size: 12px;
	width: 100%;
    margin: 0;
    padding: 0;
    border-top: none;
	    margin-top: 0;
}
#footer {

	
}
.snsArea {
	width: 90%!important;
	margin: 30px auto!important;
}
#headerLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 8px;
}

#mainContainer {
    margin: 0 auto;
}
#mainContents {
	width: 100%;
}
.mainVisualImg img {
    width: 100vw;
    max-width: 1200px;
}
#pageContainer {
	padding-bottom: 0!important;
}
li a ,
a ,
a:link,
a:hover {
	text-decoration: none;
}
/* ==========================================================================
   2. Layout & Sections (セクション構造)
   ========================================================================== */

.booklove-section00 {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.booklove-section01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    padding: 20px;
}

.booklove-section03 {
    width: 80%;
}

.new-bf-and-epos {
    width: 100%;
    color: black;
    gap: 20px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.booklove-bf-wrap {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.attention {
background-color: white;
    margin: auto;
    width: 70%;
    border-radius: 16px;
	margin-bottom: 30px;
}

/* ==========================================================================
   3. Typography & Text (テキスト系)
   ========================================================================== */
h1, h2, h3 { margin: 0 auto; }

.mainVisualText02 {
    font-size: clamp(14px, 2.5vw, 18px);
    color: black;
    text-align: center;
    margin-top: 16px;
}

.booklove-heading02Title {
    font-family: "Zen Maru Gothic", sans-serif;
    color: #fd6235;
    font-size: clamp(24px, 3vw, 32px);
    text-align: center;
    margin:  0 auto 20px auto;
    width: 70%;
}

.booklove-heading02Title img{ width: 100%;}

.booklove-heading02Title span { font-size: clamp(14px, 1.5vw, 25px);}

.booklove-iconText {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(18px, 2.5vw, 30px);
    font-weight: bold;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.index{
    display: flex;
    align-items: center;
    gap: 8px;
}
.index_num {
    font-size: clamp(60px, 8vw, 70px);
    font-weight: bold;
    color: #fd6235;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.index_textwrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fd6235;
}
.index_main {
    font-size: clamp(23px, 2.5vw, 30px);
    font-weight: bold;
    margin: 0;
}
.index_sub {
    font-size: clamp(14px, 13vw, 20px);
    margin: 0;
}

.booklove-mediaHead { text-align: center; }
.booklove-mediaText,.booklove-mediaText2 { 
	margin: 0;
    font-size: clamp(14px, 2vw, 18px);
 }
 .booklove-mediaText{
    font-weight: bold;
 }

.booklove-mediaText01 {
    font-size: clamp(18px, 2.5vw, 30px);
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 16px;
}

.booklove-mediaText02 {
    font-size: clamp(16px, 2vw, 25px);
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 16px;
}

.booklove-mediaText02 span {
    font-size: clamp(30px, 2.5vw, 30px);
    font-weight: bold;
    color: #FF2525;
}

.no_voiContent .booklove-mediaText02-attention {
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    margin-top: 10px;
	color: #039;
}
.no_voiContent .booklove-mediaText02-attention:hover {
    color: #FF2222;
}

li {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.booklove-mediaNoteList {
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}

.mt20 { margin: 0; }

/* ==========================================================================
   4. Components (ボタン・カード・メディア)
   ========================================================================== */
/* ボタン系 */
.booklove-btnWrap {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
.booklove-btn02, .booklove-btn03 {
	width: 300px;
}
.booklove-btn02 a, .booklove-btn03,  a {
    text-decoration: none;
    color: black;
}
.booklove-btn02Text {
	font-size: 16px;
}
.booklove-applyBtnText a { text-decoration: none; }
.booklove-btn a { font-size: 16px; font-weight: bold; color: white;}
.booklove-btn02 { text-align: center; }
.booklove-btn03 { font-size: 16px; font-weight: bold; text-align: center; }
.small a{ text-decoration: none; }
.booklove-applyBtnText {
    font-size: clamp(12px, 1.5vw, 24px);
    padding: 10px 20px;
    display: inline-block; 
	background-color: white;
}
.small ,.booklove-applyBtnText ,.booklove-btn{text-align: center; color: white; background-color:#c52e13; padding: 10px 20px;border-radius: 300px;border: 2px solid white;box-shadow: 0 0 4px gray;}
.booklove-btn02Text a{ text-decoration: none; }
.booklove-btn02Text{color: #c52e13;}
.apply { padding: 0; }

/* 申し込みメディアエリア */
.booklove-media02-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
}

.booklove-media02 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 16px;
    width: 70%;
}

.booklove-mediaBody img { width: 100%; }
.webBtn{text-align: center ; margin: auto; font-size: 12px;}
.booklove-mediaList{ margin: auto; width: 90%; padding: 0 70px; text-align: left; font-size: 12px;}
/* カードデザイン */
.booklove-cardWrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 70%;
}

.booklove-card { text-align: center; width: 50%; }
.booklove-cardTitle {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: clamp(18px, 2.5vw, 30px);
    font-weight: bold;
    color: black;
}


/* 会員特典 */
.booklove-bf-wrap{
    width: 70%;
    background-color: white;
    padding: 20px;
    border: 2px solid #C3BF5B;
    box-shadow: 0px 0px 0px 10px white;
}
.booklove-bf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 16px;
}

.booklove-bf img { width: 30%; }
.booklove-bf-txt-wrap { width: 60%; color: black; }
.booklove-bf-txt-wrap-p1 { font-size: clamp(14px, 2.5vw, 20px); font-weight: bold; }
.booklove-bf-txt-wrap-p1 span { font-size: 12px; font-weight: normal; }
.booklove-bf-txt-wrap-p2 { font-size: clamp(18px, 3vw, 25px); font-weight: bold; }
.booklove-bf-txt-wrap-p2 span { font-size: 12px; font-weight: normal; }

/* ==========================================================================
   5. Floating (追従ボタン)
   ========================================================================== */
.booklove-floatingWrap01 {
    position: fixed;
    left: 0;
    bottom: 0; /* 下部固定を明示 */
    width: 100%;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 9999;
    backdrop-filter: blur(6px);

}

.booklove-floatingWrap01 .booklove-floatingInner {
    position: relative;
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
}

.booklove-floatingWrap01 .commonFloating {
    padding: 10px 0;
}

.booklove-btnFloatWrap {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* ==========================================================================
   6. News Box (ニュースエリア)
   ========================================================================== */
.newsBox {
    width: 100%;
    height: auto;
	padding: 20px 0;
	margin: auto;
}
.newsBoxHeading{
	width: 70%;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: clamp(24px, 3vw, 32px);
	color: #fd6235;
	text-align: left;
}
.newsBoxInner{
	width: 70%; margin: auto;
}
.contentbox{
	width: 100%; border-radius: 16px;
	background-color: white;
	padding: 10px 14px;
}
.contentbox ul li{
	display: table;
	text-indent: 0;
	padding-left: 0;
}
.date{
	font-size: 16px;
	font-weight: bold;
	color: #fd6235;
	text-align: left;
	display: table-cell;
	width: 80px;
}
.txt{
	font-weight: normal;
    color: black;
	display: table-cell;
	padding-left: 15px;
}
/* ==========================================================================
   7. Modal (モーダル)
   ========================================================================== */
.modalInlineWrapper { display: none; }
#cboxContent { overflow: visible !important; max-width: 1100px; }
#colorbox #cboxLoadedContent { overflow: auto !important; overflow-x: hidden !important; }
#cboxClose {
    display: block;
    position: absolute;
    top: -20px !important;
    right: -20px !important;
    background: url(/common-files/img/com_close_ic04.png) no-repeat 0 0 !important;
    width: 48px !important;
    height: 48px !important;
    text-indent: -9999px;
}
.modalContents { width: 100%; padding: 40px 30px; }
.modalContents p { color: #000; }
.ModalInner .cb_close a:after {
    right: 10px;
    height: 14px; width: 14px;
    margin-top: -7px;
    background-image: url(/common-files/img/com_close_ic01.png);
}

/* ==========================================================================
   8. Responsive (メディアクエリ)
   ========================================================================== */
@media screen and (min-width: 751px) {
    .spOnly { display: none !important; }
	#mainContainer{ background: url("img-files/bg.webp") repeat 0 0 / 100% auto;}
	.booklove-mediaBody { width: 200px; }
	.booklove-mediaImage img{width: 50%;}
    .booklove-cardImage img { width: 60%; }
    .booklove-cardImage2 img { width: 40%; }
}

@media screen and (max-width: 750px) {
    .pcOnly { display: none !important; }
    #mainContainer{ background: #f9f8f1;}
    .newsBoxHeading, .newsBoxInner{width: 90%; margin: auto;}
    .booklove-heading02Title{width: 100%; margin: 0;}
    .booklove-heading02Title img{width: 100%;}
    .booklove-mediaText{text-align: center;}
    .booklove-applyBtnText{font-size: 16px;}
    .booklove-section01,.booklove-media02-wrap, .booklove-bf {
        flex-direction: column;
        width: 90%;
		margin:  auto;
    }
    .new-bf-and-epos {
        flex-direction: column;
        width: 100%;
    }
    .booklove-heading02 { margin-bottom: 30px;}
    .booklove-media01,.booklove-media02, .booklove-card, .booklove-bf-txt-wrap {  width: 100%;   }
	.carduraimg{width: 90%;	}
	.booklove-cardWrap{width: 100%;    flex-direction: column;	}
	.booklove-card{width: 100%;}
	.booklove-mediaNoteList{text-align: center;}
	.booklove-mediaBody { width: 50%; }
	.booklove-iconText { justify-content: center;}
	.booklove-bf img { width: 80%; }
	.booklove-bf-txt-wrap-p1,.booklove-bf-txt-wrap-p2{text-align: center;}
	.booklove-mediaNoteList{text-align: left;}
	.booklove-section02{width: 100%;}
	.booklove-mediaImage img{width: 80%;}
	.booklove-btnWrap{
		flex-direction: column;
		gap: 10px;
	} 
	.booklove-boxInner { width: 100%; margin: auto;}
    .booklove-cardImage img { width: 60%; }
    .attention{width: 90%; margin: auto;margin-bottom: 30px;}
    .small{font-size: 12px;}
	/*２０２６０４０９追加分*/
	#footer {
		margin-top: 30px;
		padding: 0;
		width: 100%;
	}
	.booklove-bf-wrap {
    width: 90%;
	}
	#mainContents {
        width: 100%;
        margin: 0;
        padding: 0;
    }
	.date{
	width: 40px;
	}
	.txt{
	padding-left: 10px;
	}
	.booklove-mediaList{ padding: 0;}
}