@charset "UTF-8";
/* CSS Document */

section.second_page_title{background: url('./img/title_bg.jpg') no-repeat center #000;}

p.page_caption .marker{font-size:120%; font-weight: bold; background: linear-gradient(transparent 65%, #d5ff22 65%);}
p.page_caption .en_txt{font-size: 80%; line-height: 1.5; display: block; padding-top: 10px;}

section h4{border-left: 6px solid #a8a8a8; padding-left: 10px; font-size: 32px; font-weight: bold; line-height: 1.0; margin-bottom: 40px;}
section h4 span{font-size: 50%; text-indent: 1.0em;}

section .en{font-size: 80%;}

section#how_to{}
section#how_to ul{display: flex; justify-content: space-between;}
section#how_to ul li{width: 200px; border: 2px solid #eaeaea; border-radius: 10px; box-sizing: border-box;}
section#how_to ul li.arrow{width: 20px; border: none; background: url("img/arrow_r.svg") no-repeat center; background-size: 11px auto;}

section#how_to ul li dl{}
section#how_to ul li dl dt{background: #000; color: #fff; line-height: 1.2; text-align: center; border-radius: 10px 10px 0 0; padding: 10px; font-size: 24px; font-weight: bold;}
section#how_to ul li dl dd{padding: 15px 10px 120px; position: relative;}
section#how_to ul li dl dd div.limit{border-bottom: 2px dashed #a8a8a8; text-align: center; padding: 0 0 15px; margin-bottom: 15px; font-weight: bold; font-size: 18px;}
section#how_to ul li dl dd p{margin: 0;}
section#how_to ul li dl dd .en{display: block; padding-top: 20px;}
section#how_to ul li dl dd div.btn{padding-top: 15px; position: absolute; bottom:0;}
section#how_to ul li dl dd div.all_list_btn{bottom: 50px;}
section#how_to ul li dl dd div.btn a{width: 176px; display: block; border: none !important; font-weight: bold; text-align: center; padding: 10px 0;}


section#sipping{}
section#sipping h5{font-size: 21px; padding-top: 40px;}
section#sipping p{margin: 10px 0 10px 25px; clear: both;}
section#sipping p.caution{font-size: 80%;}
section#sipping .red_txt{color: #ff0000;}

section#sipping #sipping_free{border: 2px solid #eaeaea; padding: 20px;margin: 20px 0 25px 20px; float: left;}

section#sipping table{border: 2px solid #eaeaea; border-collapse: collapse; border-spacing: 0; margin-left: 25px;}
section#sipping table th{background: #eaeaea; padding: 10px;}
section#sipping table#use th{width: 170px; border-right: 2px solid #fff;}
section#sipping table#use th:last-child{border-right: 2px solid #eaeaea;}
section#sipping table#use td{padding: 2px 10px; text-align:center;}
section#sipping table#use td.top{padding-top:10px;}
section#sipping table#use td.bottom{padding-bottom:10px;}

section#sipping table#equipments th{width: 220px; border-right: 2px solid #fff;}
section#sipping table#equipments th:first-child{width: 170px;}
section#sipping table#equipments th:last-child{border-right: 2px solid #eaeaea;}
section#sipping table#equipments td{padding: 5px; font-size: 100%; text-align:center; border: 2px solid #eaeaea; }




section#new_gear{padding-bottom: 100px;}
section#new_gear ul.link_btn{margin-top: 20px;}
	section#new_gear ul#new_gear_insta{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-top: 40px;}
	section#new_gear ul#new_gear_insta li{width: 24%; background: #fff; margin-bottom: 10px; aspect-ratio: 4 / 5; height: auto; overflow: hidden;}
	section#new_gear ul#new_gear_insta li a{display: block;}
	section#new_gear ul#new_gear_insta li a img{width: 100%; height: 100%;}


section#demo_movie{padding-bottom: 100px;}
	section#demo_movie ul#demo_youtube{display: flex; justify-content: space-between; width: 100%;}
	section#demo_movie ul#demo_youtube li{width: 48%;}
	section#demo_movie ul#demo_youtube li iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}


section#all_list{background: #fff; padding: 60px; margin: 40px auto 100px; overflow: hidden; width: 960px; border: 2px solid #eaeaea;}
	section#all_list #all_list_text{float: left; width: 50%;}
	section#all_list #all_list_text h4{border-left: 6px solid #a8a8a8; padding-left: 10px; font-size: 32px; font-weight: bold; line-height: 1.0; margin-bottom: 40px;}
	section#all_list #all_list_text p{font-weight: bold; margin: 0; line-height: 1.8;}
	section#all_list #all_list_text p span{background: linear-gradient(transparent 65%, #d5ff22 65%);}
	section#all_list #all_list_text ul.link_btn{width: auto; justify-content: flex-start; margin-top: 40px;}

	section#all_list #all_list_image{float: right;}



@media screen and (max-width: 640px) {
	section h4{font-size: 24px;}
	section#sipping h5{line-height: 1.0; padding-bottom: 15px;}
	section#sipping h5 .en{font-size: 70%;}
	
	section#how_to{}
	section#how_to ul{display: inline; justify-content: center;}
	section#how_to ul li{width: 100%;}
	section#how_to ul li.arrow{width: auto; height: 30px; background: url("img/arrow_b.svg") no-repeat center; background-size: auto 15px;}
	section#how_to ul li dl dd{padding: 15px 10px;}
	section#how_to ul li dl dd div.btn{padding-top: 15px; position: relative; bottom:auto;}
	section#how_to ul li dl dd div.btn a{margin: auto; padding: 10px 0;}

	section#sipping p{margin: 10px 0 10px 0;}
	section#sipping #sipping_free{border: 2px solid #eaeaea; padding: 10px;margin: 20px auto; float: none;}
	section#sipping table{margin-left: 0;}
	
	section#sipping table#equipments{font-size: 90%;}
	section#sipping table#equipments th{width: auto; vertical-align: top;}
	section#sipping table#equipments th:first-child{width: auto;}
	section#sipping table#equipments td{padding: 5px;}
	
	section#new_gear ul.link_btn{width: auto; justify-content: center; flex-wrap: wrap;}
	section#new_gear ul.link_btn li{padding-bottom: 10px;}
	section#new_gear ul#new_gear_insta{margin-top: 20px;}
	section#new_gear ul#new_gear_insta li{width: 48%; background: #fff; margin-bottom: 10px;}
	
	section#demo_movie ul#demo_youtube{display: inline; justify-content: center; width: 100%;}
	section#demo_movie ul#demo_youtube li{width: 100%; padding-bottom: 20px;}
	
	section#all_list{background: #fff; padding: 20px 10px; margin: 40px auto; width: 90%;}
	section#all_list #all_list_text{float: none; width: 100%;}
	section#all_list #all_list_text h4{font-size: 24px;}
	section#all_list #all_list_text p{font-weight: bold; margin: 0; line-height: 1.8;}
	section#all_list #all_list_text ul.link_btn{width: auto; justify-content: center; margin-top: 40px;}

	section#all_list #all_list_image{float: none; width: 95%; margin: 15px auto;}
	section#all_list #all_list_image img{width: 100%;}
}