@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:900,700,500,400,300,100);

/*-----------------------------------------------------------
    ～768 （Mobile）	リキッド
 769～1023（Tablet）	リキッド
1024～1440（PC）		リキッド
1440～    （PC）		コンテンツ幅固定。左右の余白が広がる

ブレークポイント768px/1024px/1441px
-----------------------------------------------------------*/
/*-- base font-size -----------------------------------------
769px～	font-size: calc(1000vw/1440)
	1440pxのとき1rem:10px
～768px	font-size: calc(1000vw/360)
	360pxのとき1rem:10px;
-----------------------------------------------------------*/

/* 色設定 */
:root {
--color_darkblue: #000E7B;
}

/* font-size */
/*【PC】従来の表示に寄せるためコンテンツ幅はmax 960pxとし、以下をリキッドとする
　 さらにページ幅960px 以上はフォントサイズ16pxでとまるようにする
  【SP】幅420px弱時のfont-sizeを従来のテンプレートに合わせて16pxにする
   ベースのfont-sizeを1.4remとすることで、幅360px時14px→幅420px時16.333...pxとなる */
/* px→em変換
	10px=0.625em(10/16)
	20px=1.25em
	40px=2.5em
*/

/* font-size */
.osv * {
	font-size:2.4rem;/* 1.6*1440/960 */
}
@media screen and (min-width: 961px) {
	.osv * {
		font-size:16px;
	}
}
@media screen and (max-width: 768px) {
	.osv * {
		font-size:1.4rem;
	}
}
/* ------------------------------------
	common
------------------------------------ */
.osv {
	background-color: #fafafa;
	padding-bottom: 5em;
	word-break:normal;
}
.osv .inner{
	max-width:960px;
	width:96%;
	margin:auto;
	padding:1em 0;
}
.osv a {
	text-decoration: underline;
	font-size:inherit;
}
.osv h2{
	font-size:2em;
}
.osv h2.ttl_line{
	border-bottom: 2px solid #ccc;
	font-size:1.5em;
	padding-bottom:5px;
}
.osv h3.accordion_switch{
	font-size:1.3em;
	line-height: 1.4
}
.osv h4{
	font-size:1.2em;
	color:	#0070c0;
	font-weight:600;
	position: relative;
	letter-spacing: 0;
}
.osv h5{
	font-weight:600;
	font-size:1.1em;
	position: relative;
	text-indent:-1em;
	padding-left:1em
}
.osv h5::before{
	content:"・";
}
.osv h5 ~ p,
.osv h5 ~ ul{
	padding-left:1em;
}
.osv .aquos_only{
	font-size: 0.75em;
	font-weight: 400;
	line-height: 1.6;
	display: inline-block;
	position:absolute;
	top:0;right:0;
	color: #fff;
	background: #3b3bce;
	border-radius: 5px;
	padding: 1px 0.5em;
	letter-spacing: 0;
	text-indent:0;
}
.osv .weight_bold{
	font-weight: 600;
}
.osv .roboto{
	font-family: 'Roboto', sans-serif;
	font-size: inherit;
}
.osv .link--blank span::after {
	content:"";
	display:inline-block;
  margin-left: 0.3em;
  background-image: url(../images/icon_blank_link.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 100%;
	width:0.5625em;
	height: 0.5625em;
	max-width: 10px;
}
@media screen and (max-width: 768px) {
	.osv .inner{
		width:94%;
	}
	.osv .aquos_only{
		font-size:1.2rem;
		top:0.4rem;
	}
	.osv h4:has(.aquos_only),
	.osv h5:has(.aquos_only){
		padding-right:8rem;
	}
}
/* flexレイアウト*/
@media screen and (min-width: 769px) {
	.osv .flex_pc {
		display:flex;
		gap: 3em;
		justify-content: center
	}
}
@media screen and (max-width: 768px) {
	.osv .flex_pc {
		display:flex;
		gap: 2em;
		flex-direction: column;
		align-items: center;
	}
	.osv figure .flex_pc {
		gap:1em;
	}
}

/* ------------------------------------
	notes
------------------------------------ */
.osv .notes > li {
	font-size: 0.875em;
	color: #666;
	margin-left: 1.25em;
	text-indent: -1.25em;
}
.osv .notes.num > li {
	margin-left: 1.8em;
	text-indent: -1.8em;
}

/* ------------------------------------
	main visual
------------------------------------ */
.osv .main_visual{
	max-width: 1152px;
	margin:0 auto;
}
.osv .main_visual img{
	width:100%;
}


/* ------------------------------------
	lead
------------------------------------ */
.osv .lead{
	margin:5em 0 7em;
	text-align: center;
}
.osv .lead h2{
	font-size:2.3em;
	line-height: 1.6;
	letter-spacing: 0.04em;
	margin-left: 0.6em;
}
.osv .lead p{
	line-height: 1.8;
}

@media screen and (max-width: 768px) {
	.osv .lead{
		margin:3em 0 5em;
	}
	.osv .lead p{
		text-align: left;
	}
	.osv .lead h2 {
		font-size:2.58rem;
	}
}
/* ------------------------------------
	index
------------------------------------ */
.osv .index .index_list li{
	margin-top:1em;
	padding-left:1em;
	position: relative;
}
.osv .index .index_list li::before{
	content: "";
    position: absolute;
    top: 0.65em;
    left: 0.2em;
    width: 0.375em;
    height: 0.375em;
    border-radius: 50%;
    background-color:#666;
    vertical-align: middle;
}

/* ------------------------------------
	content
------------------------------------ */
.osv .content{
	margin-top:4em;
}
.osv .numlist{
	margin-top: 1.5em;
	font-weight:500;
}
.osv .homedeco_sample img{
	margin-left: 0.75em;
}
.osv .homedeco_sample figcaption{
	text-align: left;
}
@media screen and (max-width: 768px) {
	.osv .numlist{
		font-size:1.34rem;
	}
	.osv .homedeco_sample img{
		margin-left: 23%
	}
	.osv .homedeco_sample figcaption{
		text-align: center;
	}
}
/* ------------------------------------
	accordion
------------------------------------ */

.osv h3.accordion_switch{
	border:1px solid #999;
	padding:0.25em 2em 0.25em 0.75em;
	position: relative;
	cursor: pointer;
	background-color: #fff;
}
.osv h3.accordion_switch::after{
	content:"＋";
	position:absolute;
	top:50%;
	right:0.3em;
	transform:translateY(-50%);
	width:1.2em;
	height:1.2em;
	background-color: #aaa;
	color:#fff;
	font-size:1em;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
}
.osv h3.accordion_switch.open::after{
	content:"－";
}
.osv .accordion_contents {
	display:none;

}

/* ------------------------------------
	caution
------------------------------------ */
.osv .caution_list li {
	margin-top:0.5em;
	text-indent:-1em;
	padding-left: 1em;
}

/* 画像 -----------------------------*/
.osv figure{
	text-align: center;
}
.osv figure img{
	display: inline-block;
}
.osv figcaption{
	margin-top:0.5em;
}
.osv .w90p{width:90%;}
.osv .w80p{width:80%;}
.osv .w70p{width:70%;}
.osv .w60p{width:60%;}
.osv .w50p{width:50%;}
.osv .w40p{width:40%;}
.osv .w30p{width:30%;}
.osv .w25p{width:25%;}
.osv .w20p{width:20%;}

@media screen and (min-width: 769px) {
	.osv .pc_w900px{width:calc(900 * 0.625em / 10)}
	.osv .pc_w800px{width:calc(800 * 0.625em / 10)}
	.osv .pc_w750px{width:calc(750 * 0.625em / 10)}
	.osv .pc_w700px{width:calc(700 * 0.625em / 10)}
	.osv .pc_w600px{width:calc(600 * 0.625em / 10)}
	.osv .pc_w500px{width:calc(500 * 0.625em / 10)}
	.osv .pc_w400px{width:calc(400 * 0.625em / 10)}
	.osv .pc_w460px{width:calc(460 * 0.625em / 10)}
	.osv .pc_w350px{width:calc(350 * 0.625em / 10)}
	.osv .pc_w300px{width:calc(300 * 0.625em / 10)}
	.osv .pc_w250px{width:calc(250 * 0.625em / 10)}
}
@media screen and (max-width: 768px) {
	.osv figcaption{
		font-size:1.2rem;
	}
	.osv .sp_wauto{width:auto;}
	.osv .sp_w90p{width:90%;}
	.osv .sp_w80p{width:80%;}
	.osv .sp_w70p{width:70%;}
	.osv .sp_w60p{width:60%;}
	.osv .sp_w50p{width:50%;}
	.osv .sp_w40p{width:40%;}
	.osv .sp_w30p{width:30%;}
	.osv .sp_w20p{width:20%;}
}

/* テーブル -----------------------------*/
.osv table th,
.osv table td {
	border:1px solid #bbb;
	padding:0.5em 1em;
}
.osv table th{
	font-weight:500;
	background-color: #eee;
}

/* Margin */
.osv .mt--0 { margin-top: 0 !important;}
.osv .mr--0 { margin-right: 0 !important;}
.osv .mb--0 { margin-bottom: 0 !important;}
.osv .ml--0 { margin-left: 0 !important;}
.osv .mt--1em { margin-top: 1em !important;}
.osv .mr--1em { margin-right: 1em !important;}
.osv .mb--1em { margin-bottom: 1em !important;}
.osv .ml--1em { margin-left: 1em !important;}
.osv .mt--2em { margin-top: 2em !important;}
.osv .mr--2em { margin-right: 2em !important;}
.osv .mb--2em { margin-bottom: 2em !important;}
.osv .ml--2em { margin-left: 2em !important;}
.osv .mt--3em { margin-top: 3em !important;}
.osv .mr--3em { margin-right: 3em !important;}
.osv .mb--3em { margin-bottom: 3em !important;}
.osv .ml--3em { margin-left: 3em !important;}
.osv .mt--4em { margin-top: 4em !important;}
.osv .mr--4em { margin-right: 4em !important;}
.osv .mb--4em { margin-bottom: 4em !important;}
.osv .ml--4em { margin-left: 4em !important;}
.osv .mt--5em { margin-top: 5em !important;}
.osv .mr--5em { margin-right: 5em !important;}
.osv .mb--5em { margin-bottom: 5em !important;}
.osv .ml--5em { margin-left: 5em !important;}
@media screen and (max-width: 768px) {
	.osv .ml--10p { margin-left: 10% !important;}
	.osv .ml--25p { margin-left: 25% !important;}
}

/*OSV一覧表へのリンク*/
.link_detail a{
	text-decoration: none;
}
.link_detail a span{
	text-decoration: underline
}
.link_detail a::before{
	content: "";
	display: inline-block;
	margin-right: 7px;
	width: 11px;
	height: 11px;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 10" style="height: auto;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M.65 5H11m0 0L6.565 9M11 5 6.565 1"></path></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}