@charset "UTF-8";

@scope(.freepage){

/* common */
.size h3 img {
	width: 70%;
	margin-bottom: 7%;
}
.size_width,
.size_height {
	margin: 5% 0;
}
.size_width .item,
.size_height .item,
.size_hook .item {
	width: calc(100% / 2.2);
}
.size_height .item_wide {
	width: 100%;
}
img.size_attention {
	outline: 4px solid #ababab;
	border-radius: 8px;
	padding: 1.5% 0;
}
p.content_txt {
	text-align: left;
	font-size: 120%;
}
p.width_content_txt {
	margin-bottom: 10%;
}
.box_height {
	margin: 2.5% 0 10%;
	outline: 3px solid #ababab;
	border-radius: 8px;
}
.box_height .box-title {
    font-size: 130%;
    background: #ababab;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box_height p {
	padding: 15px 20px;
	margin: 0;
	font-size: 130%;
}
.box_height p.small {
	font-size: 110% !important;
	padding-top: 0 !important;
}
span.inbox_weight {
	outline: 1px solid #858585;
	font-size: 140%;
	margin: 0 2% 0;
	padding: 1%;
	font-weight: bold;
}
.size_point {
	border: 4px solid #81b942;
	width: 100%;
	margin: auto;
	border-radius: 8px;
	font-size: 125%;
}
.size_point::before {
    display: inline-block;
    padding: 42px 4.5%;
    background-color: #81b942;
    color: white;
    font-weight: bold;
    content: attr(data-title);
    font-size: 120%;
    letter-spacing: 0.05em;
}
.size_point p {
	display: inline-block;
	line-height: 1.5;
	vertical-align: middle;
	padding-left: 2%;
	width: 80%;
}
.size_step img,
.size_item img,
.size_cu-attention img,
.size_width img,
.size_height img {
	display: inline-block;
}
#size_freepage .attention img {
	width: 50%;
}
#width,
#height,
#hook {
	margin: 8% 0 5%;
}
.size_height img:nth-child(3) {
	width: 90%;
	margin: auto 0 3%;
}


/* common (top nav) */
.size_mokuji_item {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.size_mokuji_item div {
    margin: 0;
    padding: 2% 0 6%;
    width: calc(100% / 5.5);
}
.size_mokuji_item p {
    margin: 0;
    padding: 6% 2%;
    text-align: center;
    font-size: 16px;
    font-weight:bold;
    outline: 2px solid #81b942;
    background-color: #fff;
	border-radius: 6px;
	box-shadow: 3px 3px 4px 1px #d3d3d3;
}
.size_mokuji_item a {
	text-decoration: none;
}
.size_mokuji_item a:hover .reverse {
	background: #81b942;
	color: #fff;
	transition: background-color 0.5s;
}

/* common (contents title) */
.heading01, .heading02, .heading03 {
	position: relative;
	padding: 1em 1em 0 6em;
	border-bottom: #c0ddb0 solid 4px;
	font-size: 250%;
	margin-bottom: 5%;
}
.heading01::before {
  position: absolute;
  content: 'Step01';
  font-size: 130%;
  font-style: italic;
  line-height: 1;
  left: 0;
  bottom: 0;
	color: #81b942;
}
.heading02::before {
  position: absolute;
  content: 'Step02';
  font-size: 130%;
  font-style: italic;
  line-height: 1;
  left: 0;
  bottom: 0;
	color: #81b942;
}
.heading03::before {
  position: absolute;
  content: 'Step03';
  font-size: 130%;
  font-style: italic;
  line-height: 1;
  left: 0;
  bottom: 0;
	color: #81b942;
}
.size h3 {
	font-size: 165%;
}
h4.box_style {
    background: #ababab;
    color: #fff;
    padding: 2%;
    font-size: 120%;
    border-radius: 5px;
    margin: 1% 0 3%;
    text-align: center;
}



/* common (sub title) */
.step-subtitle,.item-subtitle {
	text-align: center;
}
.step-subtitle p {
	display: inline-block;
	font-size: 20px;
    font-weight: normal;
    color: #333;
    border-bottom: solid 2px #333;
    margin: 0px auto 3%;
    padding: 0 18px 3px;
}
.step-subtitle h2 {
	position: relative;
	padding: 1rem 0.5rem 1rem;
	outline: 4px solid #b6d3a6;
	border-radius: 8px;
	margin: 10% 0 5%;
	font-weight: bold;
	font-size: 150%;
}
.step-subtitle h2:before,
.step-subtitle h2:after {
    position: absolute;
    top: 100%;
    left: 50%;
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
}
.step-subtitle h2:before {
	margin-left: -14px;
	border-color: transparent;
	border-top-color: #b6d3a6;
	border-width: 14px;
}
.step-subtitle h2:after {
    margin-left: -8px;
    border-color: transparent;
    border-top-color: white;
    border-width: 8px;
}



/* common (awsomefont) */
ul.size_fa-ul {
    list-style: none;
    margin: 2% auto 6%;
    width: 100%;
    background: #ecf1e9;
    padding: 2%;
    border-radius: 5px;
}
ul.size_fa-ul li {
	font-size: 130%;
	margin: 0 0 1%;
}
ul.size_fa-ul li .size_icon-style {
	padding-right: 0.8em;
	color: #37231c;
}


/* common(上部吹き出し) */
.size-introduction {
    width: 100%;
    margin: 3% 0 5%;
    overflow: hidden;
}
.size-introduction .size-intro-icon {
    float: left;
    margin: 0 -20% 0 2%;
    width: 160px;
}
.size-introduction .size-intro-icon img{
    width: 100%;
    height: auto;
}
.size-introduction .chatting {
    width: 100%;
}
.says {
    display: inline-block;
    position: relative; 
    margin: 5px 1% 0 22%;
    padding: 2% 3%;
    text-align: justify;
    border-radius: 12px;
    background: #cae1bd;
	font-size: 130%;
	line-height: 1.7em;
}
.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px; 
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #cae1bd;
}
.says p {
    margin: 0;
    padding: 0;
}
p.size-intro-attention {
	text-align: center;
	border-top: solid 2px;
	border-bottom: solid 2px;
	padding: 3% 0;
	margin: 3% 0 5%;
	font-size: 110%;
	line-height: 1.5em;
}



/* common (3STEP) */
.size_step_title {
	width: 42%;
	margin: 5% auto 0;
	display: block;
}
.size_step {
	background: #cae1bd;
	border-radius: 10px;
	margin: -6% auto 5%;
	padding: 10% 2% 0;
	height: 490px;
}
.d-point_box,
.point_box {
	font-size: 180%;
	border-radius: 10px;
	text-align: center;
	background: #FFF;
	width: calc(87%/3);
	position: relative;
	padding: 3% 0;
	height: 360px;
	line-height: 1.5em;
	font-weight: bold;
}
span.step_subtitle {
	color: #81b942;
	display: block;
	font-size: 100%;
}
span.size_number {
	font-size: 130%;
}
.size_step img {
	width: 90%;
	margin: 3% auto 0;
	border-radius: 10px;
}
.size_step .d-point_box a::after { /* ドレープのみ適用 */
    content: '';
    position: absolute;
    bottom: 22px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -20px;
    border-right: 4px solid #81b942;
    border-bottom: 4px solid #81b942;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}


/* common(用意するもの) */
ul.size_item {
	width: 65%;
	margin: 0 auto 8%;
}
ul.size_item li {
	width: 25%;
	list-style: none;
}
ul.size_item img {
	width: 100%;
}


/* common (つっぱりロール、カーテン入力方法) */
.size__exbox {
	padding: var(--spc-25);
	gap: 20px;
	display: grid;
	border-radius: 6px;
	background: #ecf1e9;
}
.size__exbox h3 {
	font-size: 20px;
	margin-bottom: 20px;
	padding-bottom: 7px;
	text-align: center;
	border-bottom: 5px solid #81b942;
}
.size__exbox__cols--2 {
	grid-template-columns: repeat(2, 1fr);
	gap: 50px 20px;
	display: grid;
	text-align: center;
}
.size__exbox__cols__txt {
	gap: 20px;
	display: grid;
}
.size__exbox__cols__txt strong {
    font-weight: bold;
}
/* common (drape only) */
.size__exbox__table {
	width: 100%;
	border-collapse: collapse;
}
.size__exbox__table :is(th,td) {
	font-size: var(--fz-16);
	padding: var(--spc-10);
	border: 1px solid var(--txt-c-base);
	text-align: center;
}
.size__exbox__table th {
	white-space: nowrap;
	background-color: var(--bg-c-beige);
}
.size__exbox__table td {
        white-space: nowrap;
        background-color: #fff;
}
/* common (cefe only) */
.size__exbox__cols--3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
        display: grid;
	text-align: center;
}
.size__exbox__cols__item img.cf-wimg{
	width: 75% !important;
}
.size__exbox__cols__item img.cf-himg{
	width: 60% !important;
	margin: auto !important;
}


/* common Q＆A（common2025.cssに対して打消し） */
.style-content p {
    border-bottom: none;
}
.toggle:checked + .title + .style-content {
    max-height: 1200px;
}


/* drape */
.size_cu-attention img {
	width: calc(95% / 2);
}
.autosize {
	width: 50%;
	margin: 2% 25% 5%;
}
.size_conveni{
	display:flex;
	margin-top:30px;
}
.size-pdf2 {
	font-size: 100%;
	margin-top:20px;
}

.size-pdf2 a {
	font-size: 130%;
	background-color: #FFB536;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
}


/* drape (hook) */
ul.hook_list {
	font-size: 120%;
	padding: 0 4% 3%;
}
ul.hook_list li {
	list-style: disc !important;
	list-style-position: inside !important;
}
.hook_single {
	margin: 0 auto 5%;
}
.hook_single div,
.hook_double div {
	width: calc(100% / 4.2);
	margin-top: 1.5%;
}
.hook_single h4,
.hook_double h4 {
	font-size: 105%;
	margin-bottom: 1%;
}
h3.hook_title,
.size__exbox__cafe h3 {
	font-size: 140%;
	background: #ababab;
	color: #fff;
	padding: 1% 0;
	text-align: center;
	border-radius: 8px;
}
ul.hook_img {
	flex-direction: column;
	-webkit-flex-direction: column;
	height: 510px;
	margin: 2% 0 2% 12px;
}
ul.hook_img li {
	width: 33%;
}
ul.hook_img li img {
	width: 100%;
}

/* cafe */
.size__exbox__cafe h3 {
	margin: 5% 0 3%;
}

/* shade */
h2.howto_title {
	font-size: 180%;
	background: #817c7a;
	color: #fff;
	padding: 1.5% 0;
	text-align: center;
	border-radius: 8px;
	margin-top: 10%;
}
.howto_choice {
	margin: 0 auto 5%;
	padding: 5% 2% 0;
	height: 450px;
}
.howto_choice span {
	display: block;
	font-size: large;
	font-weight: normal;
}



/* shade (rail) */
.frame_deco {
    position: relative;
    margin: 2em 0;
    padding: 1.8em 1em;
    border: solid 3px #ababab;
    border-radius: 8px;
}
.frame_deco .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 26px;
    background: #FFF;
    color: #818080;
}
.frame_deco p {
	margin: 0; 
	padding: 0;
	font-size: 18px;
}
.install_rail div {
	width: 98%;
	margin: auto;
}
.install_rail .box-style img {
	width: 61%;
}
.install_rail .box-style p {
	display: block;
	width: 36%;
}
.Measuring_position div {
	width: 70%;
	margin: auto;
}
.Measuring_position .box-wstyle p {
	margin: auto;
}
.Measuring_position .box-hstyle {
	align-items: center;
}
.Measuring_position .box-hstyle img {
	width: calc(100% / 2.2);
}



/* blind */
.size-gwbd__block {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto 5%;
}
.size-gwbd__block__link {
    width: 70%;
    padding: 0.4% 0;
    background: #71a858;
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
    box-shadow: 3px 6px 19px -5px #777777;
}
.size-gwbd__block__link p {
    color: #fff;
}

/* --------------------------------------------------
  for Mobile
-------------------------------------------------- */
@media screen and (max-width: 767px){
	#size_freepage__main {
		padding: 0 5%;
	}

	/* common */
	#size_freepage__main .item h3,
	#size_freepage__main .item_wide h3 {
		font-size: 125%;
		margin-bottom: 2%;
	}
	p.content_txt {
		text-align: left;
		font-size: 100%;
	}
	.size__exbox__cols {
		grid-template-columns: 1fr;
        	gap: 0 10px;
	}
	.size__exbox__cols__item h3 {
		font-size: 125%;
	}
	.size__exbox__cols__item img {
		width: 80%;
	}
	.size_width .item,
	.size_height .item,
	.size_hook .item {
		width: 100%;
	}
	.size_width img,
	.size_height img {
		width: 80%;
		margin: auto;
		display: block;
	}
	.size_point::before {
        	padding: 0.5% 4.5%;
        	font-size: 110%;
        	width: 92%;
        	text-align: center;
	}
	.size_point p {
        	width: 100%;
	}
	span.inbox_weight {
        	font-size: 125%;
	}


	/* common (sub title) */
	.step-subtitle h2 {
    		margin: 10% 0 8%;
		font-size: 130%;
	}

	/* common (contents title) */
	.heading01, .heading02, .heading03 {
		font-size:150%;
	}

	/* common (top nav) */
	.size_mokuji_item {
		flex-wrap: wrap;
		margin: 3% 0 8%;
	}
	.size_mokuji_item div {
	    margin: 0.5em auto;
	    padding: 0;
	    width: calc(90% / 3);
	}
	.size_mokuji_item .only2col {
		width: calc(93% / 2);
	}
	.size_mokuji_item p {
		font-size: 14px;
	}


	/* common(上部吹き出し) */
	.size-introduction .size-intro-icon {
    		margin: 1% -23% 0 2%;
    		width: 20%;
	}
	.says {
		font-size: 110%;
		margin-left: 27%;
	}
	p.size-intro-attention {
		padding: 1.5% 3%;
		margin: 3% 2% 10%;
		font-size:105%;
	}

	/* common (3STEP) */	
        .size_step_title {
		width: 60%;
        }
	.d-point_box,
	.point_box {
		font-size: 130%;
		width: calc(92%/3);
		height: 210px;
		padding: 3% 1.8%;
	}
	.size_step {
		height: 270px;
		padding: 10% 1% 0
	}
	.size_step .d-point_box a::after {
		width: 18px;
        	height: 18px;
        	margin-left: -10px;
	}


	/* common(用意するもの) */
	ul.size_item {
		width: 85%;
	}

	/* common (つっぱりロール、カーテン入力方法) */
	.size__exbox h3 {
		font-size: 18px;
		margin-bottom: 0;
	}
        /* common↑ (cefe only) */
	.size__exbox__cols__item img.cf-wimg,
	.size__exbox__cols__item img.cf-himg {
		width: 55% !important;
	}



	/* common (awsomefont) */
	ul.size_fa-ul {
		padding: 3% 5%;
	}
	ul.size_fa-ul li {
		font-size: 100%;
	}


	/* drape */
	.size_cu-attention {
		flex-direction: column;
		margin: auto;
		align-content: space-around;
		width: 80%;
	}
	.size_cu-attention img {
        	width: 100%;
	}
	.item_wide img.hatome_h-only {
		width: 100%;
	}

	/* drape (hook) */
	ul.hook_list {
        	padding: 0 0 3%;
        	margin: 1em 3%;
	}
	.hook_single div, .hook_double div {
        	width: calc(95% / 2);
	}
	.hook_single h4, .hook_double h4 {
        	font-size: 95%;
	}


	/* shade */
	h2.howto_title {
		font-size: 120%;

	}
	.howto_choice {
		padding: 5% 1% 0 !important;
        	height: 185px !important;
	}
	.howto_choice .d-point_box {
		height: 150px;
	}
	.howto_choice span {
		display: none;
		height: 190px;
	}
	.howto_choice .small_font {
		font-size: 121%;
	}

	/* shade (rail) */
	.frame_deco .box-title {
        	font-size: 19px;
	}
	.frame_deco p {
        	font-size: 17px;
	}
	.box_height .box-title {
		margin-bottom: 2%;
	}
	.install_rail .box-style p {
		width: 100%;
        	font-size: 16px;
        	margin-top: 2%;
	}
	.install_rail .box-style img {
        	width: 100%;
	}
	.Measuring_position div {
        	width: 100%;
        	flex-direction: column;
    	}

	/* blind */
	.size-gwbd__block__link {
		width: 100%;
		font-size: 17px;
	}
	
	#shade .size_shade img.shade_top{
		margin: 1% 10% 5%;
	}

	
	#width,
	#height,
	#hook,
	#shade {
		margin-right: 2%;
		margin-left: 2%;
		margin-bottom: 10%;
	}


	ul.hook_img {
		flex-direction: row;
		-webkit-flex-direction: row;
		width: 93%;
		height: auto;
		margin: auto;
	}
	ul.hook_img li {
		width: 48%;
	}
	ul.hook_img li img {
		width: 100%;
	}
	
	.size-pdf2 {
		margin: 40px;
	}
	.size-pdf2 a {
		font-size: 130%;
		background-color: #FFB536;
		border-radius: 10px;
		padding: 3% 4%;
		color: #fff;
		text-decoration: none;
	}
}
}