@charset "utf-8";

body {
	width: 100%;
	max-width:750px;
	margin: 0 auto;
	background:#FFF;
	color:#333;
	font-size:16px;
	line-height:20px;
	position: relative;
	font-family: sans-serif;
	font-size: small;
	word-wrap : break-word;
	overflow-wrap: break-word;
}

a {
	color:#4169e1;
	text-decoration:none;
}

a:hover {
	color:#4169e1;
	text-decoration:underline;
}

p {
	font-size: 0.8rem;
	color:#333;
	line-height:18px;
	overflow-wrap:break-word;
}

hr {
	width: 90%;
	color:#333333;
}

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

input[type="image"] {
	max-width:240px;
}

/*-------------------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.container {
	position: absolute;
	top: 0;
	right: 10px;
	display: flex;
}
/*
.container .box {
margin-left: 5px;  適切な間隔を設定
}
*/

.box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 48px;
	font-weight: bold;
	font-size: 0.7rem;
}

.box a {
	padding: 0.4em 1em;
	margin: 2em 0;
	color: #FFF;
	background: #D5673B;
	border-radius: 20px;
}

.box p {
	margin: 0;
	padding: 0;
}

/*-------------------------------------------------*/

h1 {
	font-size: 1.5em;
	color: #333333;
	font-family: 'Source Sans Pro', sans-serif;
	text-align: center;
}

h2 {
padding: 0.2em;/*܂i㉺Ej̗]*/
color: #333333;
font-size:1em;
}

span {
	font-size:0.9em;
	font-weight:600;
	color: #2C3C5B;
	line-height:1;
}

/*-------------------------------------------------*/
.main{
	width:100%;
	height:auto;
	min-width:320px;
	max-width:750px;
	margin:0 auto;
	z-index:-9;
	background:#FFFFFF;
	box-sizing:border-box;
}

.top-img {
	min-width:320px;
	max-width:750px;
	border: 1px solid #ccc;
	margin: 10px;
}

.pad1vw{
	padding:1vw;
}


/*-------------------------------------------------------*/

.center_info{
	margin:0 auto;
	text-align:center;
	padding:10px;
}

.red_text{
	color:#cc0000;
	font-size:16px;
	line-height:18px;
}


.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1vw;
	margin: 0;
}

.other .grid-container {
	grid-template-columns: repeat(2, 1fr);
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	padding: 1px;
}
a.grid-item {
	color: #333;
}

.grid-container-category {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1vw;
	margin: 0;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 1px solid #ccc;
	text-align: center;
	padding: 1px;
}
a.category-item {
	color: #333;
}

/* 画像のサイズを変更 */
.category-item img {
	max-width: 100%; /* 画像の幅が親要素に収まるように調整 */
	max-height: 100%; /* 画像の高さも親要素に収まるように調整 */
	width: auto; /* 幅を自動調整 */
	height: auto; /* 高さを自動調整 */
}


[class^=ranking-icon] {
	position: absolute;
	top: -10px;
	left: -5px;
	width: 20%;
	height: auto;
	z-index: 3 !important;
	transform: rotate(-20deg);
}

.ranking-icon1 {
	left: -10px;
	width: 30%;
}

.grid-item h3 {
	margin: 0;
}

.grid-item img {
	max-width: 100%;
	height: auto;
	z-index: 2;
}

.grid-item p {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	background: rgba(0,0,0,.5);
	text-shadow:
		-1px -1px 0 #FFF,
		-1px    0 0 #FFF,
		-1px  1px 0 #FFF,
		0 -1px 0 #FFF,
		0  1px 0 #FFF,
		1px -1px 0 #FFF,
		1px    0 0 #FFF,
		1px  1px 0 #FFF;
	z-index: 3;
}

.text-color h3 {
	display: flex;
	margin: 1px 0 0 0;
	align-items: center;
	justify-content: center;
	background:#404040;
	width: 110px;
	height: 30px;
	font-size: 0.6rem;
	line-height: 1.5;
	color: #FFF;
	font-weight: 700;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-color h3.multiline {
	width: 150px;
}

.text-color h3.long-text {
	white-space: normal;
	max-height: 3em;
	line-height: 1.5em;
}

/*-------------------------------------------------------*/


.newarea {
	margin:0 auto;
	width: 100%;
	border-collapse: separate;
	border-spacing:2px;
}

.newarea td {
	width: 30%;
	padding: 2px;
}

.janru {
	margin:0 auto;
	width: 100%;
	border-collapse: separate;
	border-spacing:2px;
	padding-bottom:40px;
}

.janru th,
.janru td {
	width: 20%;
}


.center {
	text-align:center;
	margin:0 auto;
}




/*----------------吹き出し---------------------------------------*/

ul{
	margin: 0;
	padding: 0;
	}

.fukidashibox{
	border:1px solid #ccc;
	margin: 3px;
	}

.fukidashibox li {
	padding: 0px;
	list-style:none;
}

.fukidashibox li p {
	margin: 0;
	padding:0;
}

.fukidashibox li a {
	display: block;
}

.fukidashibox li a + a {
	border-top: 1px solid #ccc;
}

.out_box{
	display: flex;
	width:100%;
	height: 200px;
	margin:0;
	padding:5px 5px 5px 5px;
	background-position:right 5px center;
	-webkit-background-position:right 5px center;
	-moz-background-position:right 5px center;
	-ms-background-position:right 5px center;
	-o-background-position:right 5px center;
	background-size:25px 25px;
	-webkit-background-size:25px 25px;
	-moz-background-size:25px 25px;
	-ms-background-size:25px 25px;
	-o-background-size:25px 25px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.left_box{
	width: 40%;
	height: 190px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right:5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.left_box img {
	width: auto;
	max-height: 190px;
}

.center_box{
	width:60%;
	height: 190px;
	position: relative;
}

.center_box img {
	width: 50%;
	position: absolute;
	bottom: 10px;
	right: 5px;
}

.center_box ,.center_box_small p{
	color:#333333;
	font-size:1em;
	line-height:1em;
	}


.mbl_title{
	color:#333;
	font-size:1.4em;
	line-height:1em;
	font-weight:bold;
	text-decoration:none;
	margin: 10px 0 10px 0;
}

/*-------------フッター-------------------------------------*/

footer {
	width: 100%;
	max-width:750px;
	padding: 8px 16px;
}
footer nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0px;
	list-style: none;
}
footer nav ul li{
	border-right: 1px solid #ebebeb;
	padding: 0px 8px;
}
footer nav ul li:last-child{
	border-right: none;
}
footer nav ul li a{
	color: #888;
	font-size: 12px;
}

/*-------------フッターここまで-------------------------------------*/


body.other {
	background:#FFF;
	color:#333;
	font-size:15px;
	line-height:22px;
	text-align:left;
}

.header_obi{
	background:#a79f94;
	color:#FFF;
	font-size:20px;
	line-height:26px;
	font-weight:bold;
	padding:5px 10px;
	text-align:center;

}
.header_obi+p,
.header_obi+ol{
	margin-top: 8px !important;
}

.other_obi {
	font-size:14px;
	font-weight:bold;
	line-height:16px;
	padding:5px;
	color:#FFF;
	background:#a79f94;
	margin-bottom:5px;
}

.pad5 {
	width:100%;
	padding:5px 5px;
	text-align:left;
	box-sizing:border-box;
}

.pad10 {
	width:100%;
	padding:10px 5px;
	text-align:left;
	box-sizing:border-box;
}

.pad20 {
	width:100%;
	padding:20px 0;
	text-align:left;
	box-sizing:border-box;
}

.dot_hr {
	border:1px dashed #808080;
}

.searchAria ul:after {
	content:"";
	display:block;
	clear:both;
}

.searchAria {
	width: 100%;
	margin: 20px auto;
}
.searchAria li {
	width: 25%;
	margin-bottom: 10px;
	float: left;
}

.searchAria li a {
	display: block;
	width: 80%;
	height: 35px;
	margin: 0 auto;
	font-size: 60%;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	text-shadow: 0 1px 1px #060606;
	border: 2px solid #fff;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.44);
	background: rgba(241,144,75,1);
	background: linear-gradient(135deg, rgba(241,144,75,1) 0%, rgba(184,94,30,1) 48%, rgba(227,138,74,1) 50%, rgba(147,86,42,1) 100%);
}

/*form*/
#searchform4{
	width: 90%;
	background: #fff;
	box-shadow: inset 0 0 2px #ccc;
	border-radius: 20px;
	border: solid 1px #ccc;
	display: block;
	height: 24px;
	position: relative;
	margin: 0 auto;
}
#keywords4{
	width: 80%;
	position: absolute;
	top: 3px;
	left: 12px;
	border: 0;
}
#searchBtn4{
	position: absolute;
	top: 3px;
	right: 5px;
}

.left_area {
	width:20%;
	float:left;
	padding:5px 5px 5px 0px;
	background:#ff0;
}

.right_area {
	width:75%;
	float:right;
	text-align:left;
	background:#c00;
}

.shousaiarea {
	text-align:right;
	margin:0;
}

.btn_shousai {
	background:#5cc2ff;
	color:#FFF;
	font-size:14px;
	line-height:20px;
	font-weight:bold;
	padding:5px 20px;
	text-align:center;
	margin:10px 0px;
	border-radius:2px;
	display:inline-block;
	text-decoration:none;
}

.btn_motto {
	background:#ff2a40;
	color:#FFF;
	font-size:14px;
	line-height:20px;
	font-weight:bold;
	padding:5px 20px;
	text-align:center;
	margin:10px 0px;
	border-radius:2px;
	display:inline-block;
	text-decoration:none;
}

.search_haikei {
	background:#ffd5ec;
	padding:20px 20px;
	margin-bottom:-20px;
}

.oshirase {
	margin:13px 10px;
}



.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 10vh; /* コンテナをページの高さに合わせる */
}

.image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%; /* コンテナの幅を80%に設定 */
	gap: 20px; /* 画像間の隙間 */
}

.image-container img {
	flex: 1; /* 画像を均等に配置する */
	width: 50%;
	object-fit: cover; /* 画像をコンテナに合わせる */
	max-height: 100%; /* 高さがコンテナを超えないようにする */
}

/*-----------------------------------------------------------*/

/* credit 上部余白 */
.credit {
	margin-top: 2em; /* 2em(=行)分 */
}

/* credit決済の枠 */
.credit .email {
	position: relative;
	text-align: center;
	margin: 1em 0;
	width: 91%;
	border: 1px solid #000;
	padding: 3% 1%;
	box-sizing: border-box;
}

.credit .email:after {
	display: block;
	color:#333;
	font-weight: bold;
	margin-top: 1em;
	content: 'クレジットカード・オンライン決済で登録';
	font-size: 1.1em;
}

/* メールアドレス(@より前) */
.credit .email input[name="email_tmp"] {
	width: 15em;             /* 横幅 */
	height: 2em;             /* 横幅 */
	margin-right: 2px;
}

/* メールアドレス(@より後のプルダウン) */
.credit .email select[name="email_tmp2"] {
}

/* 送信ボタン */
.credit .email .sendmail {
	margin-top: .8em;
	padding: .2em 1em;
	border-radius: 100px;
	border: 1px solid #888;
	background: #3478f6;
	color:#FFF;
	font-size: 1.5em;
}

/* 送信ボタン(入力前の押せない状態の時) */
.credit .email .sendmail:disabled {
}



/* 登録・退会・購入ボタン装飾 */
form button {
	border: none; /* 枠線を非表示にする */
	background: none; /* 背景を透明にする */
	padding: 0; /* 余白を無効にする */
}
.docomo button,
.credit button {
	padding: 0;
	border: 0;
	background: none;
	margin-bottom: 20px;
}

form button img {
	max-width: 100%;
	background-color: #FFF;
}

form + form {
	margin-top: 2em;
}

/* カード番号入力フォーム*/
.card_information {
	display: block;
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #d0e2ec;
}

.card_information input[name="cardno"] { /* カード番号 */
	width: 80%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.card_information input[name="expire"] { /* カード有効期限 */
	width: 80%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.card_information input[name="securitycode"] { /* カードセキュリティコード */
	width: 80%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.card_information input[name="holdername"] { /* カード名義人 */
	width: 80%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.card_information button { /* 確定ボタン */
	display: block;
	width: 80%; /* 幅を80%に設定 */
	margin: 0 auto; /* 中央揃え */
	padding: 10px;
	background-color: #3C8DC5;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
}

/*-------------------------------------------------------*/
body{
	background-color: #f0f8ff !important;
}

#header{
	justify-content: space-between;
	padding-left: 16px;
}
#header h1{
	margin-bottom: 0px;
}
#header h1 a{
	display: block;
	box-sizing: border-box;
	height: 48px;
	line-height: 48px;
	font-family: "Potta One";
	font-size: clamp(16px, 5vh, 32px);
	color: darkorange;
}
#header h1 a:hover{
	text-decoration: none;
}
#header nav{
	width: 248px;
	height: 48px;
}
#header nav ul{
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: end;
	height: 48px;
	padding: 4px 0px;
	padding-right: 8px;
	list-style: none;
}
#header nav ul li{
	display: block;
	width: 120px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid #ffd2a1;
	background: white;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}
@media (max-width: 391px){
	#header nav ul li{
		width: 84px;
		height: 32px;
		border-radius: 16px;
		line-height: 32px;
		font-size: 0.8rem;
	}
}
#header nav ul li a{
	display: block;
	width: 100%;
	height: 100%;
	color: #D5673B;
}
#header nav ul li a:hover{
	text-decoration: none;
}
#header nav ul li:has(a:active){
	transform: translateY(2px);
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}

main{
	background-image: linear-gradient(-45deg, #fff 25%, #00bfff 25%, #00bfff 50%, #fff 50%, #fff 75%, #00bfff 75%, #00bfff);
	background-size: 4px 4px;
	padding-bottom: 16px;
}
main > h1{
	width: fit-content;
	border-bottom: 3px solid #ffe4c6;
	margin: auto;
	margin-top: 32px !important;
	margin-bottom: 24px !important;
	padding: 0px 48px;
	padding-bottom: 4px !important;
	color: #f6781e;
	font-family: "Yusei Magic", "Potta One";
	font-size: 2.5em;
	font-weight: bold;
}
@media (max-width: 430px) {
	main > h1{
		font-size: 1.5rem !important;
	}
	main > h1 a{
		font-size: 1.2rem !important;
	}
}

main section p{
	padding: 8px 16px;
}
main section ul{
	width: fit-content;
	margin: auto;
	list-style: none;
}
main section ul li{
	width: fit-content;
}

/* ログイン */
main #login table{
	margin: auto;
}
main #login table td{
	padding: 8px 16px;
	text-align: center;
}
main #login table td input[type="submit"]{
	display: block;
	width: 120px;
	height: 40px;
	border-radius: 20px;
	border: 1px solid #ffd2a1;
	box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
	background: linear-gradient(90deg, #fbd048, #f9c007);
	margin: auto;
	margin: auto;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	transition: all 0.1s ease;
}
main #login table td input[type="submit"]:active {
	transform: translateY(2px);
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
	background: linear-gradient(90deg, #e9c043, #e7b307);
}

/* ログイン / FAQ / 問い合わせ / 利用規約 / プライバシーポリシー / 特定商取引法に基づく表示 */
main .faq section,
main .rule section,
main .policy section,
main .specific section{
	margin-top: 16px;
}
main .faq section{
	border-top: 1px solid #EEE;
	padding-top: 16px;
}
main .login p,
main .faq p,
main .inquiry p,
main .rule p,
main .policy p,
main .specific p,
main .faq section h2,
main .rule section h2,
main .policy section h2,
main .specific section h2{
	padding-left: 16px;
	padding-right: 16px;
	font-size: 0.8rem;
}
main .faq section h2,
main .rule section h2,
main .policy section h2,
main .specific section h2{
	margin: 0px;
}
main .faq p,
main .rule p,
main .policy p,
main .specific p{
	margin: 0px;
}
main .faq section ul{
	margin: 0px;
	margin-left: 48px;
	list-style: initial;
	font-size: 0.8rem;
}
main .rule ol{
    padding: 0px 24px;
    padding-left: calc(24px + 1rem);
}
main .rule section ol li{
	font-size: 0.8rem;
}
.information{
	text-align: center;
	font-size: 0.8rem;
}

/* 登録完了 */
.registered{
	padding-bottom: 32px;
}
.registered table{
	width: 240px;
    margin: 32px auto;
}
.registered table th,
.registered table td{
	height: 32px;
    padding: 0px 16px;
}
.registered table th{
	color: #6d6d6d;
	font-weight: normal;
}
.registered table td{
	font-weight: bold;
}

/* 横方向並び */
.layoutHorizontal{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* 共通ボタン / キャリア別ボタン */
.buttonCommon,
main section .buttonMobileCarriers{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 64px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	border: 1px solid #CCC !important;
	border-radius: 32px !important;
	background: initial !important;
	padding: 0px 32px !important;
	text-shadow: none !important;
	color: #666 !important;
	font: initial !important;
	font-weight: bold !important;
}
.buttonCommon:active,
main section .buttonMobileCarriers:active {
	transform: translateY(2px);
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}
.buttonCommon{
    width: fit-content;
    height: 48px;
}
main section .buttonMobileCarriers img{
	height: 48px;
	object-fit: contain;
}
main section .descriptionMobileCarriers{
	margin-top: 4px;
	text-align: center;
	color: #999;
	font-size: 0.8rem;
}

/* 見出し */
main section .other_obi{
	padding-left: 16px;
}

/* 推薦テキスト（フキダシ化） */
main .new-text{
	position: relative;
	background: #fff3f1;
	width: fit-content;
    max-width: 90%;
	border-radius: 8px;
	margin: auto;
	margin-bottom: 32px;
	padding: 16px 48px;
}
@media (max-width: 391px){
    main .new-text{
	    padding: 16px 24px;
    }
}
main .new-text::after{
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #fff3f1;
}

main .fukidashibox li a + a{
	border-top: 1px solid #ccc;
}

/* もっと見るリンク */
main .obiLink{
	display: block;
	box-sizing: border-box;
	width: 100%;
	border-radius: 4px;
	background: #fff9f8;
	margin-top: 16px;
	padding: 16px 32px;
	text-align: right;
	color: #666;
	font-weight: bold;
}
main .obiLink:hover{
	text-decoration: none;
}

/* ページネーション */
.pagination{
	justify-content: center;
	padding: 0px 20px !important;
}

/* ダウンロードボタン */
.buttonDownload{
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 110px;
	height: 24px;
	border-radius: 12px;
	background: linear-gradient(90deg, #e83c78, #e4004f);
	text-align: center;
	line-height: 24px;
	color: #FFF;
	font-weight: bold;
	font-size: 0.6rem;
}

/* 新規会員登録はこちら */
main .registButton{
	display: block;
	max-width: 600px;
	max-height: 84px;
	border-radius: 50px;
	box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
	background: linear-gradient(90deg, #fbd048, #f9c007);
	margin: auto;
	line-height: 84px;
	text-align: center;
	color: #FFF;
	font-family: "Yusei Magic", "Potta One";
	font-size: 40px;
	font-weight: bold;
	transition: all 0.1s ease;
}
@media (max-width: 600px) {
	main .registButton{
        max-width: 80%;
		margin: 0px auto;
		font-size: 28px;
	}
}
main .registButton:hover{
	color: #FFF;
	text-decoration: none;
}
main .registButton:active {
	transform: translateY(2px);
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
	background: linear-gradient(90deg, #e9c043, #e7b307);
}

/* コンテンツ検索 */
.search .layoutHorizontal{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 16px;
}
.search .layoutHorizontal label{
	margin: 0px;
}
.search .layoutHorizontal input[type="text"]{
	width: initial;
}