@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&display=swap');

#guide h3{ text-align: center; margin: 0 0 85px;}

#guide .box{ margin: 0 0 90px;}
#guide .box1 .item{ display: flex; align-items: center; justify-content: space-between; border: 1px #e6e6e6 solid; margin: 0 0 37px; padding: 0 20px 0 195px; position: relative; border-top-left-radius:5px;  border-bottom-left-radius:5px;}
#guide .box1 .item:after{ position: absolute; left: 0; right: 0; margin: auto; bottom: -28px; content: ''; width: 0; height: 0; border-left: 27px solid transparent; border-right: 27px solid transparent; border-top: 16px solid #787878;}
#guide .box1 .item:last-of-type{ margin: 0;}
#guide .box1 .item:last-of-type:after{ display: none;}
#guide .box1 .step{ position: absolute; left: 0; width: 195px; height: 100%; font-size: 24px; text-align: center; display: flex; align-items: center; justify-content: center;
 border-top-left-radius:5px;  border-bottom-left-radius:5px; background: #ad4271; color: #fff; letter-spacing: 0.1em; line-height: 1; font-family: 'Cinzel', serif;}
#guide .box1 .bxTxt{ padding: 16px 20px; line-height: 1.3;}
#guide .box1 .bxTxt .tit2{ font-size: 28px; color: #ad4271; margin: 0 0 5px; display: flex; align-items: center;}
#guide .box1 .bxTxt .tit2 span{ margin-right: 15px; min-width: 32px; margin-top: 0.15em; display: flex;}
#guide .box1 .bxTxt .txt{ font-size: 18px;}
#guide .box1 .btn_step{ min-width: 240px; font-size: 19px; line-height: 1; padding: 17px 0; color: #fff; text-align: center;  display: block;background: linear-gradient(90deg, #436e05 15%, #739f35 50%, #436e05 85%); position: relative;}
#guide .box1 .btn_step span{ display: inline-block; position: relative; padding-left: 25px;}
#guide .box1 .btn_step span:before { position: absolute; content: ''; width: 16px; height: 16px; left: 0; background: url("../../images/guide/ic_arrow.png") no-repeat; background-size: 100%; top: 55%;
transform: translateY(-50%);}
#guide .box1 .txtR{ font-size: 16px; text-align: right; padding: 10px 0 0;}

#guide .box2{ margin: 0 0 80px;}
#guide .box2 .tit_red{ font-size: 26px; color: #ad4271; border-left: 4px #ad4271 solid; padding-left: 20px; line-height: 1.2; margin: 0 0 30px;}
#guide .box2 .fra_txt{ line-height: 1.7; margin: 0 0 40px; font-size: 20px;}
#guide .box2 .fra_txt .txt1{ font-size: 22px; padding: 0 0 15px; margin: 0 0 15px; border-bottom: 1px #e5e5e5 solid;}
#guide .box2 .fra_txt li{ padding-left: 21px; position: relative; margin: 0 0 5px;}
#guide .box2 .fra_txt li span{ color: #ad4271; position: absolute; left: 0; top: 0;}
#guide .box2 .fra_txt li small{ font-size: 14px; display: inline-block;}
#guide .box2 .txt_row{ padding: 20px 25px; border: 1px #e6e6e6 solid; border-radius: 5px; display: flex; font-size: 18px;}
#guide .box2 .txt_row p:nth-of-type(1){ min-width: 60px;}

#guide .col1{ color: #ad4271;}
#main-cap{ margin-top: 120px;}

/* ============== Media =============== */

@media only screen and (max-width: 1080px){
	#guide .box1 .step{ width: 150px;}
	#guide .box1 .item{ padding: 0 15px 0 150px;}
	#guide .box1 .btn_step{ min-width: 195px;}
	#guide .box1 .bxTxt{ padding: 15px;}
}
@media only screen and (max-width: 767px){
	#guide .box1 .item{ padding: 20px 10px 20px 25%; flex-wrap: wrap;}
	#guide .box1 .step{ width: 21%; font-size: 4vw;}
	#guide .box .tit{ font-size: 4.5vw; margin: 0 0 25px;}
	#guide .box1 .bxTxt{ padding: 0;}
	#guide .box1 .bxTxt .tit2{ font-size: 4.3vw;}
	#guide .box1 .bxTxt .txt{ font-size: 3.3vw;}
	#guide .box1 .btn_step{ margin: 15px 0 0; min-width: 80%; font-size: 3.5vw; padding: 2vw 0 2.5vw;}
	#guide .box1 .txtR{ font-size: 14px;}
}
@media only screen and (max-width: 480px){
	#guide h3{ margin: 0 0 10vw;}
	#guide .box{ margin: 0 0 50px;}
	#guide .box1 .bxTxt .tit2 span{ min-width: 20px; max-width: 20px; margin-right: 5px;}
	#guide .box1 .item::after { bottom: -26px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 10px solid #787878;}
	
	#guide .box2 .tit_red{ font-size: 20px; padding-left: 10px; border-left: 2px #ad4271 solid; margin: 0 0 15px;}
	#guide .box2 .fra_txt{ font-size: 14px; margin: 0 0 25px;}
	#guide .box2 .fra_txt .txt1 { font-size: 16px; padding: 0 0 10px; margin: 0 0 10px;}
	#guide .box2 .fra_txt li{ padding-left: 15px;}
	#guide .box2 .txt_row{ display: block; font-size: 14px; padding: 20px 15px;}
}