@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: black;
    overflow-x: hidden;
}

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

footer {
    text-align: center;
    font-size: 12px;
    margin: 0;
    padding: 0;
    border-top: none;
}

#headerLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 16px;
}

#mainContainer {
    margin: 0 auto;
}
#mainContents {
	width: 100%;
}

.mainVisualImg img {
    width: 100vw;
    max-width: 1200px;
}
.snsArea {
    width: 90% !important;
    margin: 30px auto !important;
}

/* ==========================================================================
   2. Layout & Sections (セクション構造)
   ========================================================================== */
.agito-section00 {
    background: url("img-files/bg.webp") repeat 0 0 / 1200px auto;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

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

.agito-section03 {
    width: 80%;
}

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

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

.attention {
    background-color: white;
}

/* ==========================================================================
   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;
}

.agito-heading02Title {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
    color: white;
    font-size: clamp(24px, 3vw, 32px);
    text-align: center;
    margin-bottom: 20px;
}

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

.agito-iconText {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
    font-size: clamp(18px, 3vw, 30px);
    font-weight: bold;
    color: black;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.agito-iconText span{    font-size: clamp(16px, 2vw, 25px);}
.agito-mediaHead { text-align: center; }
.agito-mediaText,.agito-mediaText2 { 
	margin: 0;
    font-size: clamp(14px, 2vw, 18px);
 }

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

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

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

.agito-mediaText02-attention {
    font-size: 12px;
    font-weight: normal;
    color: black;
    text-decoration: underline;
    margin-top: 10px;
}

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

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

.mt20 { margin: 0; }

/* ==========================================================================
   4. Components (ボタン・カード・メディア)
   ========================================================================== */
/* ボタン系 */
.agito-btnWrap {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.agito-btn a, .agito-btn02 a, .agito-btn03, .agito-applyBtnText a {
    text-decoration: none;
    color: black;
}
.applyBtn{padding: 0;}
.applyBtn li{
    padding-left: 0;
    text-indent: 0;
}
.applyBtnEntry a ,.applyBtnChange a{
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
}

.agito-btn a { font-size: 16px; font-weight: bold; }
.agito-btn02 { text-align: center; }
.agito-btn03 { font-size: 16px; font-weight: bold; text-align: center;}
.agito-btn03 a:link { text-decoration: none; }
.small a{ text-decoration: none; }
.small, .agito-applyBtnText {
    font-size: clamp(12px, 1.5vw, 24px);
    border: 1px solid black;
    padding: 10px 20px;
    display: inline-block; 
	background-color: white;
}
.agito-btn02Text a{text-decoration: none;}
.agito-btn02Text{color: black; text-decoration: none;}
.apply { padding: 0; }

/* 申し込みメディアエリア */
.agito-media02-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: white;
    padding: 20px;
    width: 80%;
}

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

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

.agito-card { text-align: center; width: 50%; }
.agito-cardTitle {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
    font-size: clamp(18px, 2.5vw, 30px);
    font-weight: bold;
    color: black;
}


/* 会員特典 */
.agito-bf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    gap: 16px;
}

.agito-bf img { width: 30%; }
.agito-bf-txt-wrap { width: 60%; color: white; }

.agito-bf-txt-wrap-p1 { font-size: clamp(14px, 2.5vw, 20px); font-weight: bold; }
.agito-bf-txt-wrap-p1 span { font-size: 12px; font-weight: normal; }
.agito-bf-txt-wrap-p2 { font-size: clamp(18px, 3vw, 25px); font-weight: bold; }
.agito-bf-txt-wrap-p2 span { font-size: 12px; font-weight: normal; }

/* ==========================================================================
   5. Floating (追従ボタン)
   ========================================================================== */
.agito-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);
}

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

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

.agito-btnFloatWrap {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ==========================================================================
   6. News Box (ニュースエリア)
   ========================================================================== */
.newsBox {
    background: url("img-files/bg.webp") repeat 0 0 / 1200px auto;
    width: 100%;
    height: auto;
	padding: 20px 0;
	margin: auto;
}
.newsBoxHeading{
	width: 80%;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
	font-size: clamp(24px, 3vw, 32px);
	color: white;
	text-align: left;
}
.newsBoxInner{
	width: 80%; margin: auto;
}
.contentbox{
	width: 100%;
	background-color: white;
	padding: 10px;
}
.contentbox ul li{
	display: table;
	padding: 10px;
	text-indent: 0;
	padding-left: 0;
}
.date{
	font-size: 16px;
	font-weight: bold;
	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; }
	
	.agito-mediaBody { width: 20%; }

	.agito-mediaImage img{width: 50%;}
.agito-cardImage img { width: 60%; }
.agito-cardImage2 img { width: 40%; }
}

@media screen and (max-width: 750px) {
    .pcOnly { display: none !important; }
    
    .agito-section01,.agito-media02-wrap, .agito-bf {
        flex-direction: column;
        width: 90%;
		margin: 20px auto;
    }
    .new-bf-and-epos {
        flex-direction: column;
        width: 100%;
    }
    .attention {
    margin: 0 10px
    }
    .agito-media01,.agito-media02, .agito-card, .agito-bf-txt-wrap {  width: 100%;   }
	.carduraimg{width: 90%;	}
	.agito-cardWrap{width: 100%;    flex-direction: column;	}
	.agito-card{width: 100%;}
	.agito-mediaNoteList{text-align: center;}
	.agito-mediaBody { width: 80%; }
	.agito-iconText { justify-content: center;}
	.agito-bf img { width: 80%; }
	.agito-bf-txt-wrap-p1,.agito-bf-txt-wrap-p2{text-align: center;}
	.agito-mediaNoteList{text-align: left;}
	.agito-section02{width: 100%;}
	.agito-mediaImage img{width: 80%;}
	.agito-btnWrap{
		flex-direction: column;
		gap: 10px;
	}

	.agito-boxInner { width: 100%; margin: auto;}
.agito-cardImage img { width: 80%; }
.agito-cardImage2 img { width: 60%; }
	
	.date{
	width: 40px;
	}
	.txt{
	padding-left: 10px;
	}
	.agito-mediaList{ padding: 0;}

	}