/* =============================================================
サイズについて .size
============================================================= */
/* 共通
-------------------------------------------*/
/*  */
.size ul{
	display:flex;
	flex-direction:row;
	margin:2rem 0;
	align-items:stretch;
	gap:20px;
}

/* =============================================================
ボタン .btn
============================================================= */
/* リード文 */
.size .btn p.lead{
	width:90%;
	margin:0 auto;
}

/* 各ボタン */
.size .btn li{
	text-align:center;
	flex:1;
}

/* 各ボタン */
.size .btn li a{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	height:100%;
}

/* 各ボタンの画像外枠 */
.size .btn li figure{
	border:solid 1.5px var(--color-primary);
	border-radius:15px 15px 0 0;
	padding:0.5rem;
}

/* 各ボタンのテキスト*/
.size .btn li p{
	color:#fff;
	font-weight:bold;
	font-size:1.3rem;
	padding:1rem 0;
	background:var(--color-primary);
	border-radius:0 0 15px 15px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

/* 円テーブルのテキスト */
.size .btn li:last-child p{
	flex-grow:1;/*隣り合ったコンテンツと高さを合わせる*/
}

/* "長方形"の部分 */
.size .btn li p small{
	display:block;
}

/* 各ボタンの下矢印 */
.size .btn li span{
	display:block;
	margin:0 auto;
	color:#fff;
	width:15px;
	height:15px;
	border-left:solid 1.5px #fff;
	border-bottom:solid 1.5px #fff;
	transform:rotate(-45deg);
}


/* =============================================================
おすすめサイズの決め方 .content
============================================================= */
/* 共通
-------------------------------------------*/
/* 中のコンテンツ */
.size .content .wrapper{
	width:95%;/*幅*/
	margin:0 auto;
}

/* 計算式 */
.size .content figure{
	margin:2rem auto;
	width:90%;
}

/* 計算式 */
.size .content .calculation p{
	font-weight:bold;
	font-size:1.3rem;
	justify-content: flex-start;
	align-items:center;
}


/* 左のコンテンツ */
.size .content .calculation p.left{
	/*width:70%;*/
	/*flex:1;*/
	margin-bottom:0.5rem;
	padding:0.5rem;
	padding-left:0.8rem;
}

/* 右のコンテンツ */
.size .content .calculation p.right{
	/*width:70%;*/
	/*flex:1;*/
	background:#fcfaeb;
	padding:0.8rem;
	margin-bottom:1.5rem;
	text-align:center;
}

/* オレンジテキスト */
.size .content .calculation p.left_ora{
	border-left:solid 15px #e19242;
}

/* ブルーテキスト */
.size .content .calculation p.left_blu{
	border-left:solid 15px #2967a8;
}

/* ブルーテキスト矢印 */
.size .content .calculation p.left_blu span{
	transform:rotate(90deg);
}

/* 緑枠計算式の例 */
.size .content .ex{
	background:#eaf3ea;
	padding:1rem 0;
	width:100%;
}

/* 緑枠計算式の例のp */
.size .content .ex p{
	font-weight:bold;
}

/* -計算例- */
.size .content .ex p.sub_title{
	text-align:center;
	font-size:1.2rem;
}

/* 緑枠計算式の真ん中 */
.size .content .ex p.middle_txt{
	width:85%;
	margin:1rem auto;
}

/* 緑枠計算式の下のテキスト */
.size .content .ex ul{
	justify-content:center;
	gap:1rem;
	margin:0;
}

/* 緑枠計算式の下のテキスト */
.size .content .ex ul li p{
	background:#fff;
	padding:1rem;
}

/* 緑枠計算式の下のテキスト */
.size .content .ex ul li:last-of-type p{
	background:transparent;
	padding:1rem;
	text-decoration:underline;
}

/* 円テーブル
-------------------------------------------*/
/* 計算式左のテキスト */
.size #circle_type .calculation p.left{
	position: relative;
	border:none;
	padding-left:2.5rem;
}
/* 一辺二色のボーダー */
.size #circle_type .calculation p.left::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 20px;
	background: linear-gradient(to bottom, #e19242 50%, #2967a8 50%);
}


/* =============================================================
フォームの入力について .form
============================================================= */
/* 大枠 */
.size .form .wrapper{
	width:95%;
	margin:0 auto;
}

/* 見出し */
.size .form h1{
	background:#3d85cc;
}