@charset "UTF-8";

/* ----------------------------------
 足のサイズの測り方・ウイズ対応表
---------------------------------- */
#size_measure { max-width: 1200px; margin: 0 auto 90px; color: #0B2241;}
#size_measure .for-sp-size { display: none;}
#size_measure h1,
#size_measure h2,
#size_measure h3,
#size_measure h4,
#size_measure h5 { padding: 0; margin: 0; border: none; background: none;}
#size_measure p { font-size: 16px; line-height: 1.6; color: #0B2241;}
#size_measure h2.image-ttl { padding: 0 0 20px; margin: 0 0 30px; border-bottom: #0B2241 1px solid; text-align: center; background: none;}
#size_measure h2.image-ttl img { height: 58px; vertical-align: top;}
#size_measure h3.color-bg { padding: 10px 20px; margin: 0 0 24px; border: none; font-size: 24px; font-weight: 400; text-align: center; color: #001E62; background: #DADBED;}
#size_measure .sec-box { margin: 0 0 40px;}
#size_measure .button a { width: 400px; height: 48px; margin: 0 auto; border-radius: 4px; font-size: 16px; font-weight: 400; text-align: center; text-decoration: none; color: #FFF; display: flex; justify-content: center; align-items: center; background: #0B2241;}
#size_measure p.kome-txt { padding: 0 0 0 1em; font-size: 14px; text-indent: -1em; color: #596C98;}

@media screen and (max-width: 1000px) {
	#size_measure { margin: 0 auto 40px;}
	#size_measure .for-sp-size { display: block;}
	#size_measure p { font-size: 14px;}
	#size_measure h2.image-ttl { padding: 0 0 10px; margin: 0 0 24px;}
	#size_measure h2.image-ttl img { height: 40px;}
	#size_measure h3.color-bg { padding: 10px; font-size: 20px;}
	#size_measure .button a { width: 100% ; height: 42px; font-size: 14px;}
}

/* タイトル */
#size_measure #sec_main { margin: 0 auto 85px;}
#size_measure #sec_main h1 { margin: 0 auto 30px; text-align: center;}
#size_measure #sec_main h1 img { width: 100%; vertical-align: top;}
#size_measure #sec_main .page-navi ul { display: flex; justify-content: center; align-items: center; column-gap: 40px;}
#size_measure #sec_main .page-navi ul li { width: 252px; position: relative;}
#size_measure #sec_main .page-navi ul li::after { content: ''; width: 100%; height: 56px; border-radius: 4px; display: block; background: #0B2241; position: absolute; right: -3px; bottom: -3px;}
#size_measure #sec_main .page-navi ul li a {
  width: 100%;
  height: 56px;
  border: #0B2241 1px solid;
  border-radius: 4px;
  font-size: 23px;
  font-weight: 400;
	text-decoration: none;
  color: #0B2241;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  position: relative;
  z-index: 2;
}
#size_measure #sec_main .page-navi ul li a::after {
	content: '';
	display: block;
  border-top: #E24D3E 6px solid;
  border-right: transparent 6px solid;
  border-bottom: transparent 6px solid;
  border-left: transparent 6px solid;
	position: absolute;
	right: 24px;
	top: calc(50% - 3px);
}

@media screen and (max-width: 1000px) {
	#size_measure #sec_main { margin: 0 auto 35px;}
	#size_measure #sec_main h1 { margin: 0 auto 16px;}
	#size_measure #sec_main .page-navi ul { margin: 0 15px; column-gap: 10px;}
	#size_measure #sec_main .page-navi ul li { width: calc(50% - 5px);}
	#size_measure #sec_main .page-navi ul li::after { height: 36px;}
	#size_measure #sec_main .page-navi ul li a { height: 38px; font-size: 16px;}
}

/* 知ろう */
#size_measure #sec_know { max-width: 1000px; margin: 0 auto 80px;}
#size_measure #sec_know .shose-point-list { margin: 50px 0; display: flex; justify-content: space-between; column-gap: 80px;}
#size_measure #sec_know .shose-point-list li { width: calc((100% - 80px * 2)/3);}
#size_measure #sec_know .shose-point-list li .ttl { margin: 0 0 20px; font-size: 18px; font-weight: 700; text-align: center; color: #0B2241;}
#size_measure #sec_know .shose-point-list li .image { margin: 0 0 20px; text-align: center;}
#size_measure #sec_know .shose-point-list li .image img { width: 100%; vertical-align: top;}
#size_measure #sec_know .shose-point-list li .text { margin: 0 0 20px; font-size: 16px; font-weight: 700; line-height: 1.8; text-align: left; color: #444444;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_know { padding: 0 10px;}
	#size_measure #sec_know .shose-point-list { max-width: 300px; margin: 40px auto; display: block;}
	#size_measure #sec_know .shose-point-list li { width: 100%;}
	#size_measure #sec_know .shose-point-list li + li { padding: 30px 0 0; margin: 30px 0 0; border-top: #0B2241 2px dashed;}
	#size_measure #sec_know .shose-point-list li .text { font-size: 14px;}
}

/* 足サイズ 基本の測り方 */
#size_measure #sec_know .sec-box#base_point { margin-top: 80px;}
#size_measure #sec_know .sec-box#base_point .image { max-width: 670px; margin: 0 auto 30px; text-align: center;}
#size_measure #sec_know .sec-box#base_point h4.center-ttl { margin: 0 auto 60px; font-size: 40px; font-weight: 700; text-align: center; color: #001E62;}
#size_measure #sec_know .point-list-wrap { margin: 0 0 80px; display: flex; justify-content: space-between; column-gap: 40px;}
#size_measure #sec_know .point-list-wrap ul.point-list { width: calc(50% - 20px);}
#size_measure #sec_know .point-list-wrap ul.point-list li + li { margin-top: 40px;}
#size_measure #sec_know .point-list-wrap ul.point-list .number { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: #E24D3E;}
#size_measure #sec_know .point-list-wrap ul.point-list .ttl { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 1.2; color: #0B2241;}
#size_measure #sec_know .point-list-wrap ul.point-list .text { font-size: 16px; font-weight: 400; line-height: 2.0; color: #0B2241;}
#size_measure #sec_know .howto-measure { display: flex; justify-content: space-between; align-items: stretch;}
#size_measure #sec_know .howto-measure li { width: calc(50% - 20px); padding: 50px 40px 40px; background: #F2F2F2; position: relative;}
#size_measure #sec_know .howto-measure li .ttl { width: 100%; font-size: 22px; font-weight: 700; text-align: center; color: #0B2241; position: absolute; top: -0.75em; left: 0;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_know .sec-box#base_point { margin-top: 40px;}
	#size_measure #sec_know .sec-box#base_point .image { max-width: 670px; margin: 0 auto 30px; text-align: center;}
	#size_measure #sec_know .sec-box#base_point h4.center-ttl { margin: 0 auto 30px; font-size: 24px}
	#size_measure #sec_know .point-list-wrap { margin: 0 0 40px; display: block;}
	#size_measure #sec_know .point-list-wrap ul.point-list { width: 100%;}
	#size_measure #sec_know .point-list-wrap ul.point-list li { margin-top: 24px;}
	#size_measure #sec_know .point-list-wrap ul.point-list .number { font-size: 12px;}
	#size_measure #sec_know .point-list-wrap ul.point-list .ttl { margin: 0 0 10px; font-size: 16px;}
	#size_measure #sec_know .point-list-wrap ul.point-list .text { font-size: 14px; line-height: 1.6;}
	#size_measure #sec_know .howto-measure { display: block;}
	#size_measure #sec_know .howto-measure li { width: 100%; padding: 40px 36px 30px;}
	#size_measure #sec_know .howto-measure li + li { margin-top: 40px;}
}

/* 測ろう */
#size_measure #sec_measure { max-width: 1000px; margin: 0 auto 80px;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_measure { padding: 0 10px;}
}

/* ウイズ判定ツール */
#size_measure #sec_measure_uisu .uisu-form-wrapper {
	padding: 20px 0;
	margin: 20px 0;
	font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	line-height: 1.6;
	color: #333;
	background: #f4f7f9;
}
#size_measure #sec_measure_uisu .uisu-form-inner {
	width: 100%;
	max-width: 500px;
	padding: 30px 40px;
	margin: 0 auto;
	border-radius: 12px;
	background-color: #FFF;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
#size_measure #sec_measure_uisu h4.ttl { margin: 0 0 10px; font-size: 24px; font-weight: 700; text-align: center; color: #2c3e50;}
#size_measure #sec_measure_uisu .ttl-sub { margin: 0 0 20px; text-align: center; color: #555;}
#size_measure #sec_measure_uisu #uisu-form .form-group { margin-bottom: 20px;}
#size_measure #sec_measure_uisu #uisu-form label { margin-bottom: 8px; display: block; font-weight: bold; color: #555;}
#size_measure #sec_measure_uisu #uisu-form input[type="number"],
#size_measure #sec_measure_uisu #uisu-form select { width: 100%; height: 52px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; box-sizing: border-box; transition: 0.3s;}
#size_measure #sec_measure_uisu #uisu-form input[type="number"]:focus,
#size_measure #sec_measure_uisu #uisu-form select:focus { outline: none; border-color: #001b6E; box-shadow: 0 0 5px rgba(0, 27, 110, 0.25);}
#size_measure #sec_measure_uisu #uisu-form button {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 6px;
	color: white;
	font-size: 18px;
	font-weight: bold;
	background-color: #001b6E;
	cursor: pointer;
	transition: 0.3s;
}
#size_measure #sec_measure_uisu #uisu-form button:hover { background-color: #00124a;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_measure_uisu .uisu-form-inner { width: calc(100% - 30px); max-width: calc(100% - 30px); padding: 30px;}
	#size_measure #sec_measure_uisu #uisu-form .form-group { margin-bottom: 14px;}
	#size_measure #sec_measure_uisu #uisu-form label { margin-bottom: 4px;}
}

/* 結果表示エリア */
#size_measure .uisu-form-wrapper #result { padding: 20px; margin-top: 25px; border-left: #28a745 5px solid; border-radius: 6px; background-color: #e9f7ef; text-align: center;}
#size_measure .uisu-form-wrapper #result p { margin: 0; font-size: 18px; font-weight: bold; color: #155724;}
#size_measure .uisu-form-wrapper #result .uisu-value { font-size: 28px; color: #001b6E;}

/* 取扱なし・エラーメッセージのスタイル */
#size_measure .uisu-form-wrapper .not-handled { border-left-color: #D8000C !important; color: #D8000C; background-color: #FFD2D2;}
#size_measure .uisu-form-wrapper .not-handled p { font-size: 16px !important; color: #D8000C !important;}
#size_measure .uisu-form-wrapper .not-handled .uisu-value { color: #D8000C !important;}

/* ウイズから選ぶ */
#size_measure #sec_measure_search h3.color-bg { margin-bottom: 0;}
#size_measure #sec_measure_search h4 { margin: 0 0 25px; font-size: 18px; font-weight: 500; text-align: center;}
#size_measure #sec_measure_search .search-list-wrap {
	padding: 16px;
	margin: 0 0 24px;
	background-image: url(/img/usr/freepage/size_measure/dot.png);
	background-repeat: repeat;
	background-position: center;
	-webkit-background-size: 5px 5px;
	background-size: 5px 5px;
}
#size_measure #sec_measure_search .search-list { width: 584px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; column-gap: 44px;}
#size_measure #sec_measure_search .search-list li {
  width: calc(50% - 22px);
  height: 56px;
  border: #0B2241 2px solid;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #0B2241;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
	cursor: pointer;
}
#size_measure #sec_measure_search .search-list li.active { color: #FFF; background: #0B2241;}
#size_measure #sec_measure_search #search_select { display: none;}
#size_measure #sec_measure_search .search-size-list { max-width: 600px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px;}
#size_measure #sec_measure_search .search-size-list li { width: calc((100% - 16px * 2)/3); position: relative;}
#size_measure #sec_measure_search .search-size-list li a {
  width: 100%;
  height: 56px;
  border: #0B2241 1px solid;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
	text-decoration: none;
  color: #0B2241;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  position: relative;
  z-index: 2;
}
#size_measure #sec_measure_search .search-size-list li a::after {
	content: '';
	display: block;
  border-top: #E24D3E 6px solid;
  border-right: transparent 6px solid;
  border-bottom: transparent 6px solid;
  border-left: transparent 6px solid;
	position: absolute;
	right: 16px;
	top: calc(50% - 3px);
}

@media screen and (max-width: 1000px) {
	#size_measure #sec_measure_search .search-list-wrap { padding: 16px 36px;}
	#size_measure #sec_measure_search .search-list { display: none;}
	#size_measure #sec_measure_search #search_select { 
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		width: 100%;
		height: 56px;
		border: #0B2241 2px solid;
		border-radius: 4px;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: #0B2241;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFF;
		background-image: url("/img/usr/freepage/size_measure/arrow.png");
		background-repeat: no-repeat;
		background-position: calc(100% - 16px) center;
		-webkit-background-size: 8px auto;
		background-size: 8px auto;
	}
	#size_measure #sec_measure_search #search_select option { 
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: #0B2241;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFF;
	}
	#size_measure #sec_measure_search .search-size-list { gap: 12px;}
	#size_measure #sec_measure_search .search-size-list li { width: calc(50% - 6px);}
	#size_measure #sec_measure_search .search-size-list li a { height: 40px; font-size: 14px;}
	#size_measure #sec_measure_search .search-size-list li a::after { right: 12px;}
}

/* 表示サイズについて */
#size_measure #sec_measure_about_size h4 { margin: 0 0 25px; font-size: 24px; font-weight: 500; text-align: center;}
#size_measure #sec_measure_about_size .tab-contents-wrap { margin: 40px 0 0;}
#size_measure #sec_measure_about_size .tab-list { display: flex; justify-content: space-between; column-gap: 4px;}
#size_measure #sec_measure_about_size .tab-list li {
  width: calc(50% - 2px);
	height: 50px;
	border: #EDEDED 1px solid;
	border-radius: 4px 4px 0 0;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	color: #9F9F9F;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	background: #EDEDED;
	position: relative;
	z-index: 2;
}
#size_measure #sec_measure_about_size .tab-list li.active { height: 50px; border-color: #0B2241; border-bottom-color: #FFF; color: #0B2241; background: #FFF;	bottom: -1px;}
#size_measure #sec_measure_about_size .tab-contents { padding: 24px; border: #0B2241 1px solid; border-radius: 0 0 4px 4px;}
#size_measure #sec_measure_about_size .tab-contents .head { display: none;}
#size_measure #sec_measure_about_size .tab-contents p { font-size: 16px; line-height: 1.8;}
#size_measure #sec_measure_about_size .tab-contents .indent-list li { padding-left: 1em; font-size: 16px; text-indent: -1em; line-height: 1.8;}
#size_measure #sec_measure_about_size .tab-contents .indent-list li + li { margin-top: 5px;}
#size_measure #sec_measure_about_size .button { margin-top: 24px;}

@media screen and (min-width: 999px) {
	#size_measure #sec_measure_about_size .tab-contents .tab-contents-inner { display: block !important;}
}
@media screen and (max-width: 1000px) {
	#size_measure #sec_measure_about_size h4 { font-size: 20px;}
	#size_measure #sec_measure_about_size .tab-list { display: none !important;}
	#size_measure #sec_measure_about_size .tab-contents { padding: 0; border-radius: 4px; display: block !important;}
	#size_measure #sec_measure_about_size .tab-contents + .tab-contents { margin-top: 10px;}
	#size_measure #sec_measure_about_size .tab-contents .head { padding: 12px 24px; border-radius: 4px; position: relative; cursor: pointer; display: block;}
	#size_measure #sec_measure_about_size .tab-contents .head::before,
	#size_measure #sec_measure_about_size .tab-contents .head::after {
		content: '';
		width: 14px;
		border-top: #E24D3E 2px solid;
		display: block;
		position: absolute;
		top: calc(50% - 1px);
		right: 16px;
		transition: 0.3s;
	}
	#size_measure #sec_measure_about_size .tab-contents .head::after { transform: rotate(90deg);}
	#size_measure #sec_measure_about_size .tab-contents .head.active::after { transform: rotate(0deg);}
	#size_measure #sec_measure_about_size .tab-contents-inner { padding: 0 24px 24px;}
	#size_measure #sec_measure_about_size .tab-contents .head:not(.active) + .tab-contents-inner { display: none;}
	#size_measure #sec_measure_about_size .tab-contents p { font-size: 14px; line-height: 1.6;}
	#size_measure #sec_measure_about_size .tab-contents .indent-list li { font-size: 14px; line-height: 1.6;}
}

/* サイズ表 */
#size_measure #sec_graph { max-width: 1000px; margin: 0 auto 80px;}
#size_measure #sec_graph .graph-box { margin: 0 0 50px;}
#size_measure #sec_graph h2 { padding: 0; margin: 0 auto 40px; font-size: 25px; text-align: center; display: flex; justify-content: center; align-items: center;}
#size_measure #sec_graph h2::before { content: '■'; margin-right: 20px; font-size: 25px; color: #E24D3E; display: inline-block;}
#size_measure #sec_graph h2::after  { content: '■'; margin-left: 20px; font-size: 25px; color: #E24D3E; display: inline-block;}
#size_measure #sec_graph h3 { padding: 10px; margin: 0 0 10px; font-size: 20px; font-weight: bold; text-align: center; color: #fff; background: #696969;}
#size_measure #sec_graph .table-wrap + .table-wrap { margin-top: 30px;}
#size_measure #sec_graph table { width: 100%; border: #000 1px solid; border-collapse: collapse; box-sizing: border-box;}
#size_measure #sec_graph table th,
#size_measure #sec_graph table td { padding: 14px 0; border: #000 1px solid; border-collapse: collapse; font-size: 20px; text-align: center; line-height: 1.0; color: #444; box-sizing: border-box;}
#size_measure #sec_graph table th { width: 90px; font-weight: bold;}
#size_measure #sec_graph table td { width: 70px;}
#size_measure #sec_graph table tr:nth-child(odd) th,
#size_measure #sec_graph table tr:nth-child(odd) td { background-color: #E3E3E3;}
#size_measure #sec_graph table tr:nth-child(1) th,
#size_measure #sec_graph table tr:nth-child(1) td { background-color: #FFF;}
#size_measure #sec_graph table td.title_ { width: 85px; font-weight: 700;}
#size_measure #sec_graph .table-bottom { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: center;}
#size_measure #sec_graph .table-bottom p { font-size: 14px; color: #444;}

#size_measure #sec_graph #size_ladies .table-wrap table th { width: 125px; min-width: 125px; max-width: 125px;}
#size_measure #sec_graph #size_ladies .table-wrap table td:not(.title_) { width: 95px; min-width: 95px; max-width: 95px;}
#size_measure #sec_graph #size_ladies .table-wrap table td.title_ { width: auto;}
#size_measure #sec_graph #size_kids .table-wrap table th { width: 125px; min-width: 125px; max-width: 125px;}
#size_measure #sec_graph #size_kids .table-wrap table td:not(.title_) { width: 95px; min-width: 95px; max-width: 95px;}
#size_measure #sec_graph #size_kids .table-wrap table td.title_ { width: auto;}
#size_measure #sec_graph #size_kids .table-wrap.half { padding: 0 calc(95px * 4) 0 0;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_graph { padding: 0 10px;}
	#size_measure #sec_graph h2 { margin: 0 auto 20px; font-size: 17px;}
	#size_measure #sec_graph h2::before { margin-right: 12px; font-size: 17px;}
	#size_measure #sec_graph h2::after  { margin-left: 12px; font-size: 17px;}
	#size_measure #sec_graph h3 { font-size: 16px;}
	#size_measure #sec_graph .table-wrap + .table-wrap { margin-top: 20px;}
	#size_measure #sec_graph table th,
	#size_measure #sec_graph table td { padding: 8px 0; font-size: 11px; text-align: center;}
	#size_measure #sec_graph .table-bottom { display: block;}
	#size_measure #sec_graph .table-bottom p { font-size: 12px;}
	#size_measure #sec_graph #size_ladies .table-wrap table th { width: 50px; min-width: 50px; max-width: 50px;}
	#size_measure #sec_graph #size_ladies .table-wrap table td:not(.title_) { width: calc((100vw - 120px)/8); min-width: calc((100vw - 120px)/8); max-width: calc((100vw - 120px)/8);}
	#size_measure #sec_graph #size_ladies .table-wrap table td.title_ { width: 50px; min-width: 50px; max-width: 50px;}
	#size_measure #sec_graph #size_kids .table-wrap table th { width: 50px; min-width: 50px; max-width: 50px;}
	#size_measure #sec_graph #size_kids .table-wrap table td:not(.title_) { width: calc((100vw - 120px)/8); min-width: calc((100vw - 120px)/8); max-width: calc((100vw - 120px)/8);}
	#size_measure #sec_graph #size_kids .table-wrap table td.title_ { width: 50px; min-width: 50px; max-width: 50px;}
	#size_measure #sec_graph #size_kids .table-wrap.half { padding: 0 calc(((100vw - 120px)/8) * 4) 0 0;}
}

#size_measure #sec_banner .banner { max-width: 860px; margin: 0 auto;}
#size_measure #sec_banner .banner img { width: 100%; vertical-align: top;}

@media screen and (max-width: 1000px) {
	#size_measure #sec_banner { padding: 0 10px;}
}