html {
font-size: 62.5%;/* jQueryで書き換える */
}

body {
color: #2C2C2C;
font-size: 1.6rem;/* remで指定 */
line-height: 1.5;
}

.bg-success2 {
    background-color: #4653a2;
}
button {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

a {
	color: #337ab7;
	text-decoration: none;
}
.ly_siteWrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ly_header {
	padding: 15px 56px;
}

.ly_header_inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 880px;
	width: 100%;
}

.ly_main {
	background-color: #fafafa;
	flex: 1;
	overflow-x: hidden;
}

.ly_section {
	padding: 90px 0;
}

.ly_section_inner {
	margin: 0 auto;
	max-width: 880px;
	padding: 0 15px;
	text-align: center;
	width: 100%;
}

.bl_headerList {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.bl_headerList > * + * {
	margin-left: 56px;
}

.bl_headerList a {
	line-height: 1.5;
	padding: 10px;
}

/********************/
/* ボタンのスタイル */
/********************/
.bl_sizeBtn_wrap {
	align-items: flex-end;
	display: inline-flex;
	font-weight: 500;
	margin-top:10px;
}

.bl_sizeBtn_wrap > span {
	font-size: 14px;
	letter-spacing: 0.05em;
}

.bl_sizeBtn_wrap > * + * {
	margin-left: 5px;
}

.bl_sizeBtn {
	background-color: #eee;
	border-radius: 0px;
	color: #666;
	padding-left: 100px;
	padding-right: 0px;
	padding: 0px;
	transition: opacity 0.4s;
	border: 1px solid #aaa;
}

.bl_sizeBtn:first-of-type {
font-size: 13px;
}

.bl_sizeBtn:nth-of-type(2) {
	font-size: 16px;
}

.bl_sizeBtn:nth-of-type(3) {
	font-size: 19px;
}

/* 選択したボタンのスタイル */
.bl_sizeBtn.is_active {
	background-color: #8cc779;
	color: #fff;
	border: 1px solid #fff;
}
/****************************/
/* ボタンのスタイルここまで */
/****************************/

.bl_sampleList {
	margin-top: 1em;
}

.bl_sampleList li {
	line-height: 1.7;
}

.bl_sampleList span {
	font-weight: 700;
	padding: 0 0.3em;
}

/* サイズ固定のテキスト */
.bl_fzPx {
	font-size: 16px;
}

.el_lv2Heading {
	font-size: 3.2rem;
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.bl_headerList a:hover {
		color: #246a92;
	}

	.bl_sizeBtn:hover {
	  opacity: 0.8;
	}
}

.button012 h3 {
	font-weight: 600;
}
.button012 p {
	margin-top: -10px;
	font-size: 15px;
	font-weight: normal;
}

.button012 a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: 350px;
	max-width: 350px;
	padding: 10px 25px 10px 70px;
	color: #555555;
	transition: 0.3s ease-in-out;
	font-weight: 600;
	border-radius: 10px;
	z-index:0;
	overflow: hidden;
	text-decoration: none;
	font-size: 24px;
	line-height: 34px;
	height: 100px;
}

.button012 a:before {
	font-family: "Font Awesome 5 Free";
	left: 10px;
	padding: 5px 5px;
	border-radius: 10px;
	z-index: 2;
	line-height: 1;
	position: absolute;
}

.button012 a:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	display: block;
	transition: .3s;
	left:0;
}
.button012 a:hover:after {
	width: 100%;
	z-index: -1;
}

.button012 a:hover {
	text-decoration: none;
	color: #000000;
}

.icon01 a		 { background: #94F5FA; }
.icon01 a:after  { background: #A8FFFF; }
.icon01 a:before { background: #A8FFFF; content: url(../img/menu/menu1.png); }

.icon02 a		 { background: #CBEAC0; }
.icon02 a:after  { background: #DFFED4; }
.icon02 a:before { background: #DFFED4; content: url(../img/menu/menu2.png); }

.icon03 a		 { background: #F5F5C2; }
.icon03 a:after  { background: #FFFFE0; }
.icon03 a:before { background: #FFFFE0; content: url(../img/menu/menu3.png); }

.icon04 a		 { background: #EBDEFE; }
.icon04 a:after  { background: #F5E8FF; }
.icon04 a:before { background: #F5E8FF; content: url(../img/menu/menu4.png); }

.icon05 a		 { background: #FFC000; }
.icon05 a:after  { background: #FFD414; }
.icon05 a:before { background: #FFD414; content: url(../img/menu/menu5.png); }

.icon06 a		 { background: #FFCCFF; }
.icon06 a:after  { background: #FFE0FF; }
.icon06 a:before { background: #FFE0FF; content: url(../img/menu/menu6.png); }

.icon07 a		 { background: #c0c0c0; }
.icon07 a:after  { background: #dcdcdc; }
.icon07 a:before { background: #dcdcdc; content: url(../img/menu/menu7.png); }

.icon08 a		 { background: #8AC1F2; }
.icon08 a:after  { background: #9ED5FF; }
.icon08 a:before { background: #9ED5FF; content: url(../img/menu/menu8.png); }


.menu { width: 80%; margin: 0 auto;}
.menu table { width: 80%; margin: 0 auto;}
.menu table td { padding: 20px 20px; background: #ffffff; }

.body { width: 90%; margin: 0 auto;}

.menutop { width: 100%; margin: 0 auto;}
.menutop table { width: 100%; margin: 0 auto;}
.menutop table td { padding: 20px; background: #ffffff; }

.arrowimg {
	vertical-align: middle;
	margin-bottom: 10px;
}
.arrowimg img {
	width: 20px;
	vertical-align: middle;
	margin-right:10px;
	margin-bottom:5px;
}

.linklist ul {
	position: relative;
}

.linklist ul li {
	line-height: 1.5;
	margin-left: 0px;
	padding: 0.0em 0;
	list-style-type: none!important;
}

.linklist ul li:before {
	font-family: "Font Awesome 5 Free";
	content: "\0bb";	/*アイコンの種類*/
	position: absolute;
	left : 20px;;
	color: #337ab7;
}

.midline {
	border-top: solid 5px #4653a2;
	margin-top:20px;
	margin-bottom:10px;
}


.selectdiv {
	position: relative;
	float: left;
	min-width: 150px;
	margin-left: 10px;
}

/* IE11 hide native button (thanks Matt!) */
	select::-ms-expand {
	display: none;
}

.selectdiv:after {
	content: '<>';
	font: 15px "Consolas", monospace;
	color: #333;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 11px;
	top: 13px;
	padding: 0 0 2px;
	border-bottom: 1px solid #999;
	position: absolute;
	pointer-events: none;
}

.selectdiv select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 150px;
	height: 35px;
	float: right;
	margin: 5px 0px;
	padding: 0px 20px;
	font-size: 16px;
	line-height: 1.75;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	-ms-word-break: normal;
	word-break: normal;
	text-align: left;
}

.menuhead {
	font-size:28px;
	font-weight: 500;
}
.menuhead_en {
	font-size:22px;
	font-weight: 500;
}
.sponly { display: none; }


/********************/
/* 段落 */
/********************/
.pn {
	margin:0 0 0 30px;
}
.pr {
	color:red;
	margin:0 0 0 30px;
}
/********************/
/* 参考画像 */
/********************/
.eximgtable { margin-left:30px; padding:0px; width:100% }
.eximgtd1 { width:30%; padding:0px; }
.eximgtd2 { width:65%; padding:0 30px 0 10px; }

/************************************************************************
  list
************************************************************************/
.ttl-B {
	color: #555555;
	background-color: #f0f8ff;
	padding:5px;
}
dl.list {  }
dl.list dt { padding:5px 0; font-weight:bold; }
dl.list dd { margin:0 0 10px; padding:5px 0; }

dl.check-list {  }
dl.check-list dt { padding:0.5em 0; }
dl.check-list dd { margin:-2.5em 0 0; padding:0.5em 0 0.5em 5em; border-bottom:1px solid #cccccc; }

dl.check-listT {  }
dl.check-listT dt { padding:0.5em 0; display:block; }
dl.check-listT dd { margin:-2.5em 0 0; padding:0.5em 0 0.5em 5em; border-bottom:1px solid #cccccc; }

ol.hl { color:#666666; font-weight:bold; font-size:20px; font-size:2rem; }

dl.table { clear:both; }
dl.table dt { width:25%; font-weight:bold; float:left; }
dl.table dd { display:table-cell; }

.infoimg {
	border: solid 1px #000000;
	width:100%;
}
.infoimg2 {
	width:100%;
	max-width:700px;
}

.dialog1::backdrop {
	backdrop-filter: blur(5px);
}
.dialog1 {
	width:70%;
	height:fit-content;
	line-height:1.8;
	border-width: 0px;
	box-shadow: 0px 20px 36px 0px rgba(0, 0, 0, 0.6);
}
.dialog2::backdrop {
	backdrop-filter: blur(5px);
}
.dialog2 {
	width:70%;
	height:fit-content;
	line-height:1.8;
	box-shadow: 0px 20px 36px 0px rgba(0, 0, 0, 0.6);
}

.fixed-box {
	position: fixed; /* 画面に対して固定 */
	bottom: 20px;    /* 下から20px */
	right: 20px;     /* 右から20px */
/*	background-color: #333;*/
	color: white;
/*	padding: 15px 20px;*/
/*	border-radius: 5px;*/
/*	box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
	z-index: 1000; /* 他の要素より前面に表示 */
}

@media screen and (max-width: 767px) {
	.menu { width: 100%; margin: 0 auto;}
	.body { width: 100%; margin: 0 auto;}
	.menu table td { display: block; padding: 10px 0px;}
	.menuhead { width: 100%; margin: 0 auto;}
	.menuhead { font-size:18px; }
	.menutop table td { display: block;}

	.sponly { display: block; }
	.menuhead_en { font-size:20px; }
	.col-xs-6 { width:90% }
}
@media only screen and (max-width:	480px) {
	body {
	    font-size: 1.1rem;
	    line-height: 1.5;
	}
}