/* =============================================================
初めてのれんを作る方へ .beginner
============================================================= */
/* 共通
-------------------------------------------*/
/* 文字間隔（自動） */
.beginner{
	font-feature-settings: "palt";
}

/*  */
.beginner ul{
	display:flex;
	flex-direction:row;
}

/* 各ステップコンテンツ */
.content{
	margin:5rem 0;
}

/* 各コンテンツの中身 */
.content .wrapper{
	width:95%;
	margin:0 auto;
}

/* リード文 */
.content .wrapper p.lead{
	text-align:left;
	margin:2rem 0;
}

/* 各ステップの見出し */
.content h2{
	color:#fff;
	background:#d5b06b;
	padding:1rem;
	width:100%;
	position:relative;
	text-align:left;
	border:none;
	vertical-align: middle;
	line-height:1.1;
}

/* 見出しの線 */
.content h2::before{
	content:"";
	width:100%;
	position:absolute;
	border-bottom:solid 3px #fff;
	bottom:8px;
	left:0;
}

/* 見出しの数字 */
.content h2 span{
	font-family: 'Times New Roman', serif;
	font-style:italic;
	font-size:3rem;
	margin-right:2rem;
	margin-left:1rem;
}


/* =============================================================
初めに .first_btn
============================================================= */
/* 見出し*/
.beginner .first_btn h3{
	text-align:center;
}

/* ボタンの包み */
.beginner .first_btn ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	column-gap:3rem;
	row-gap:2rem;
	text-align:center;
	margin:2rem 0;
}

/* 各ボタン枠 */
.beginner .first_btn a{
	display:flex;
	flex-direction:column;
}

/* step名 */
.beginner .first_btn p.step_number{
	background-color:#d5b06b;
	border-radius:15px 15px 0 0;
	color:#fff;
	padding:0.5rem 0;
	font-family: 'Times New Roman', serif;
	font-style:italic;
	font-size:2rem;
	font-weight:bold;
	letter-spacing:1.5px;
}

/* 各ボタンの名称 */
.beginner .first_btn p.step_name{
	border:solid 2px #ccc;
	border-radius:0 0 15px 15px;
	padding:1.5rem 0 0.8rem;
	min-height:100px;
	font-size:1.5rem;
	font-weight:550;
	flex:1;
}

/* 「竿通し…」のみ */
.beginner .first_btn a:nth-child(4) p.step_name{
	padding:.5rem 0;
	font-size:1.2rem;
}

/* ボタンのアイコン */
.beginner .first_btn span.icon_arrow{
	display:block;
	margin-top:0.2rem;
}
/* ボタンのアイコン */
.beginner .first_btn span.icon_arrow img{
	max-width:30px;
	height:30px;
}


/* =============================================================
１.生地 #cloth
============================================================= */
/* 各生地の枠 */
.beginner #cloth ul{
	justify-content:space-around;
	gap:2rem;
	margin:2rem auto;
}

/* 各生地 */
.beginner #cloth li{
	text-align:center;
}

/* 生地ページリンク */
.beginner #cloth li a{
	display:inline-block;
	width:100%;
	position:relative;
	background-color:#87735a;
	border-radius:20px;
	padding:1rem 0;
}

/* 麻生地ボタン */
.beginner #cloth li:first-child a{
	background-color:#87735a;
}
/* 麻風生地ボタン */
.beginner #cloth li:last-child a{
	background-color:#b3a38a;
}

/* アイコン丸 */
.beginner #cloth li a::before{
	content:"";
	width:40px;
	height:40px;
	background:#fff;
	border-radius:50%;
	top:50%;
	right:5%;
	transform:translateY(-20px);
	position:absolute;
}

/* アイコン三角 */
.beginner #cloth li a::after{
	content:"";
	width:0;
	height:0;
	border-top:transparent solid 10px;
	border-bottom:transparent solid 10px;
	position:absolute;
	top:50%;
	right:7.3%;
	transform:translateY(-10px);
}

/* 麻生地のアイコン三角 */
.beginner #cloth li:first-child a::after{
	border-left:solid 15px #87735a;
}
/* 麻風生地のアイコン三角 */
.beginner #cloth li:last-child a::after{
	border-left:solid 15px #b3a38a;
}

/* ボタン内のテキスト */
.beginner #cloth li p{
	color:#fff;
	font-size:1.5rem;
	font-family:serif;
	font-weight:550;
}

/* ボタン内の（）テキスト */
.beginner #cloth li p span{
	font-size:1rem;
}

/* 「プリント方法について」ボタン */
.beginner #cloth a.print_btn{
	display:block;
	width:100%;
	border:3px solid #b39a6b;
	border-radius:20px;
	text-align:center;
	padding:1rem 0;
	position:relative;/* アイコンの親 */
}

/*  */
.beginner #cloth a.print_btn p{
	color:#b39a6b;
	font-size:1.5rem;
	font-family:serif;
	font-weight:550;
}

/* アイコン丸 */
.beginner #cloth a.print_btn::before{
	content:"";
	width:40px;
	height:40px;
	background:#b39a6b;
	border-radius:50%;
	top:50%;
	right:10%;
	transform:translateY(-20px);
	position:absolute;
}

/* アイコン三角 */
.beginner #cloth a.print_btn::after{
	content:"";
	width:0;
	height:0;
	border-left:solid 15px #fff;
	border-top:transparent solid 10px;
	border-bottom:transparent solid 10px;
	position:absolute;
	top:50%;
	right:11%;
	transform:translateY(-10px);
}


/* =============================================================
2.サイズ #size
============================================================= */
/* 見出し */
.beginner #size h6{
	text-align:left;
	padding:0 0 0.1rem 1rem;
	border-left:10px solid #d5b06b;
	border-bottom:1.5px solid #aaa;
	font-size:1.25rem;
}

/* 横幅の採寸
-------------------------------------------*/
/* ステップの枠 */
.beginner #size .inner_w ul{
	margin:2rem 0;
	gap:2rem;
	justify-content:space-around;
}

/* 各ステップの枠 */
.beginner #size .inner_w ul li{
	flex:1;
}

/* ステップの番号画像 */
.beginner #size .inner_w span.number{
	display:inline-block;
	width:24px;
	height:24px;
}

/* 注釈 */
.beginner #size .inner_w span.annotation{
	font-size:0.8rem;
}


/* 番号画像とテキストを横並び */
.beginner #size .inner_w .area{
	display:flex;
	gap:1rem;
}

/* テキストの幅 */
.beginner #size .inner_w .area p{
	width:95%;
}

/* 例の枠 */
.beginner #size .inner_w .ex{
	display:flex;
}

/* 「例」 */
.beginner #size .inner_w .ex p:first-child{
	color:#fff;
	background:#77aa65;
	width:18%;
	border-radius:10px 0 0 10px;
	text-align:center;
	font-weight:bold;
	padding:1rem 0;
}

/* 「計算式」 */
.beginner #size .inner_w .ex p:last-child{
	border:solid 2.5px #77aa65;
	border-radius:0 10px 10px 0;
	padding:1rem 0;
	text-align:center;
	width:80%;
}


/* 高さの採寸
-------------------------------------------*/
/* 大枠 */
.beginner #size .inner_h{
	margin:2rem 0;
}

/* ボーダーの枠 */
.beginner #size .inner_h .sub_inner {
	border:solid 2px #ccc;
	padding:2rem;
}

/* ご注意くださいのテキスト */
.beginner #size .inner_h .sub_inner p{
	text-align:left;
}

/* 「ご注意ください」 */
.beginner #size .inner_h .sub_inner span{
	background:#c3321e;
	padding:0.3rem 0.8rem;
	color:#fff;
	font-weight:bold;
	text-align:center;
	display:inline-block;
	border-radius:5px;
	margin-right:1rem;
}

/* 画像 */
.beginner #size .inner_h .sub_inner ul{
	gap:2rem;
	justify-content:center;
	flex-wrap:nowrap;
	margin-top:1.5rem;
}



/* =============================================================
3.割れの数 #split
============================================================= */
/* 2~5割れの枠 */
.beginner #split ul{
	margin:2rem 0;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:2.5rem;
}

/* 各割れの枠 */
.beginner #split ul li{
	display:flex;
	flex-direction:column;
	gap:0.2rem;
}

/* 各割れ数の見出し */
.beginner #split ul li p:first-of-type{
	font-weight:bold;
	text-align:center;
}

/* 割れの数と縁起枠 */
.beginner #split .inner {
	border:solid 1.5px #ccc;
	padding:1.5rem;
}

/* 「割れの数と縁起について」 */
.beginner #split .inner h6{
	text-align:center;
}

/* 暖簾の画像の枠 */
.beginner #split .inner .image_area{
	margin:1.3rem auto;
	display:flex;
	gap:2rem;
	justify-content:space-evenly;
	padding:3rem 1rem 2rem;
	width:100%;
	background:#f3f4ef;
}

/* 画像 */
.beginner #split .inner .image_area figure{
	width:100%;
	flex:1;
}
/* 右の画像 */
.beginner #split .inner .image_area figure:last-child{
		margin-right:2rem;
}


/* =============================================================
4.竿通しの仕立てとサイズ #specification
============================================================= */
/* 棒袋と共チチコンテンツの枠 */
.beginner #specification ul{
	margin:2.5rem 0;
	gap:3.5rem;
	flex-wrap:nowrap;
	justify-content:space-around;
}

/* 各仕立ての各々の枠 */
.beginner #specification ul li{
	display:flex;
	flex-direction:column;
	gap:0.8rem;
}

/* 「～基本サイズ」の枠 */
.beginner #specification ul li .normal_size{
	border:solid 3px #f3f4ef;
	padding:1.5rem 0;
	position:relative;
}

/* 基本サイズの画像 */
.beginner #specification ul li .normal_size figure{
	width:80%;
	margin:0 auto;
}

/* 基本サイズの見出しデザイン */
.beginner #specification ul li .normal_size p{
	background:#d5b06b;
	padding:0.5rem 0;
	color:#fff;
	font-weight:bold;
	text-align:center;
	position:absolute;
	top:-1.5rem;
	left:50%;
	transform:translateX(-50%);
	width:70%;
	border-radius:10px;
}


/* =============================================================
5.ハギの長さ #hagi
============================================================= */
/* 画像とテキストの枠 */
.beginner #hagi ul{
	gap:2rem;
	justify-content:space-around;
	margin:2rem 0;
}

/* 各コンテンツの枠 */
.beginner #hagi ul li{
	flex:1;
}

/* =============================================================
extra オプション品 #option
============================================================= */
/* ボタン */
.beginner #option a.option_btn{
	display:block;
	width:100%;
	position:relative;
	border:#b39a6b 1.5px solid;
	border-radius:20px;
	padding:1rem 0;
}

/* ボタンテキスト */
.beginner #option a.option_btn p{
	text-align:center;
	color:#87735a;
	font-family:serif;
	font-size:1.5rem;
}

/* アイコン丸 */
.beginner #option a.option_btn::before{
	content:"";
	width:40px;
	height:40px;
	background:#87735a;
	border-radius:50%;
	top:50%;
	right:5%;
	transform:translateY(-20px);
	position:absolute;
}

/* アイコン三角 */
.beginner #option a.option_btn::after{
	content:"";
	width:0;
	height:0;	
	border-left:solid 15px #fff;
	border-top:transparent solid 10px;
	border-bottom:transparent solid 10px;
	position:absolute;
	top:50%;
	right:6%;
	transform:translateY(-10px);
}