@charset "UTF-8";

/* CSS Document */

/* タブレット用設定 */
@media screen and (max-width: 1100px) {
	#wrapper-inn {
		width: 960px;
	}
	#navi-box {
		display: none;
	}
	#main-image {
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	#wrapper-inn {
		width: 96%;
	}
	header, #contents, .footer-box {
		width: 100%;
	}
	
	#contents-left {
		width: 100%;
		float: none;
		margin-top: 15px;
	}
	#contents-right {
		width: 100%;
		float: none;
	}
	header .header-logo {
		width: 21.872%;
	}
	header .header-menu {
		width: 15.625%;
	}
	
	#main-image p{
		font-size: 13px;
		font-size: 1.3rem;		
	}
	.guide-item {
		width: 30%;
		margin-left: 1.5%;
		margin-right: 1.5%;
	}
	#sidebox {
		margin-top: 30px;
	}
	#sidebox > .sidebox-contact a.desktop {
		display: none;
	}
	#sidebox > .sidebox-contact a.mobile {
		display: block;
	}
	#sidebox > .sidebox-banner, #sidebox > .sidebox-contact {
		width: 520px;
	}
	#sidebox > .sidebox-contact, #sidebox > .sidebox-link > .link, #sidebox > .sidebox-banner {
		margin-left: auto;
		margin-right: auto;
	}
	#sidebox > .sidebox-banner > .banner {
		float: left;
		height: 128px;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 0px;
	}
	#footer-up {
		padding-left: 7px;
		padding-right: 7px;
	}
	.footer-box.copy {
		text-align: center;
		font-size: 12px;
		font-size: 1.2rem;
	}
}

@media screen and (max-width: 780px) {
    h1, h2.cat-title, h2.topics {
        font-size: 21px;
	    font-size: 2.1rem;
    }
    h1.longtxt, .topics h1 {
        font-size: 18px;
	    font-size: 1.8rem;
    }
    .cat-title h2 {
        font-size: 14px;
	    font-size: 1.4rem;
    }
	#lang-box, #header-desktop, #footer-sitemap, table.spec, .desktop-item {
		display: none;
	}
	.mobile-table, #mobile-sitemap, #contact-form label {
		display: block;
	}
	
	table.spec.short {
		display: table;
	}
	#mobile-sitemap {
		text-align: center;
		font-size: 12px;
		font-size: 1.2rem;
		background-color: #ccc;
		padding: 20px 6px;
	}
	#main-image p{
		font-size: 12px;
		font-size: 1.2rem;		
	}

	div.information .info-box {
		margin-top: 12px;
	}
	div.information .data {
		float: none;
		width: 100%;
	}
	div.information .titie {
		float: none;
		width: 100%;
		padding-left: 15px;
		margin-top: 7px;
	}
	#header-mobile {
		display: block;
	}
	#header-lang-box {
		margin-left: 15px;
	}
	#footer-contact {
		float: none;
		width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
	.guide-item {
		float: left;
		width: 46%;
		margin-left: 2%;
		margin-right: 2%;
	}
	div.super-air-heater {
		background-position: 138px top;
	}
	div.halogen-spot-heater {
		background-position: 120px top;
	}
	div.halogen-line-heater {
		background-position: 125px top;
	}
	div.super-beam-heater {
		background-position: 125px top;
	}
	div.ultraviolet-irradiation {
		background-position: 120px top;
	}
	div.metal-halide-lighting {
		background-position: 100px top;
	}
	div.led-light-source {
		background-position: 100px top;
	}
	div.solar-simulator {
		background-position: 110px top;
	}
	.commentary380, .commentary380r, .commentary325, .commentary300, .commentary250, .commentary160 {
		width: 96%;
		padding-right: 0;
		padding-left: 0;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.imagebox-380, .imagebox-380r {
		width: 380px;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}

	.imagebox-325 {
		width: 325px;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}

	.imagebox-300 {
		width: 300px;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	.imagebox-250 {
		width: 250px;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}

	.imagebox-160 {
		width: 160px;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.usefulness h3 {
		font-size: 18px;
		font-size: 1.8rem;
	}
	ul.list-box.float-left, ul.list-box.float-right, .usefulness .float-left, .usefulness .float-right {
			width: 100%;
	}
	.float-left.half, .float-right.half {
			float: none;
	}
	.desktop {
		display: none;
	}
	.answer {
		padding: 20px 5px 28px 42px ;
	}

	h3.subtitle span{
		display: block;
		margin-top: 12px;
		margin-left: 16px;
		line-height: 1.5em;
	}
	
	dl.table dt, dl.table dd {
		float: none;
		width: 100%;
	}
	dl.table dd {
        margin: 0;
	}
	input, textarea {
		font-size:16px;
		font-size:1.6rem;	
	}
    .over-scrolling {
        position: relative;
    }
    .over-scrolling-inn {
        overflow-y: scroll;
    }
    .over-scrolling .ctrl-bar-right,
    .over-scrolling .ctrl-bar-left
    {
        display: block;
        width: 40px;
        height: 100%;
        background-image: linear-gradient(to right,transparent,rgba(85,85,85,.25));
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }
    .over-scrolling .ctrl-bar-left {
        display: none;
        background-image: linear-gradient(to left,transparent,rgba(85,85,85,.25));
        left: 0;
        right: auto;
    }
    .over-scrolling .ctrl-bar-right::after
    {
        content: "";
        display: block;
        width: 15px;
        height: 30px;
        background-color: #535353;
        clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
        position: absolute;
        top: calc(50% - 15px);
        right: 5px;
        z-index: 50;
    }
    .over-scrolling .ctrl-bar-left::after {
        content: "";
        display: block;
        width: 15px;
        height: 30px;
        background-color: #535353;
        clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
        position: absolute;
        top: calc(50% - 15px);
        left: 5px;
        z-index: 50;
    }
    .over-scrolling-inn > table {
        width: 780px;
    }
}
@media screen and (max-width: 760px) {
	#top-iso {
		display: none;
	}
	
	.guide-box-img {
		float: none;
	}

	.guide-box-txt {
   		margin-top: 7px;
	}
    .guide-tab-boxi-inn ul li, .guide-tab-boxi-inn ul li > a {
	    width:140px;
	    height: 39px;
        font-size: 14px;
	    font-size: 1.4rem;
    }

    .guide-tab-boxi-inn ul li.selected, .guide-tab-boxi-inn ul li > a {
        -moz-background-size:contain;
        background-size:contain;
        padding: 12px 28px;
    }
	
}
@media screen and (max-width: 708px) {
	.box660, .box670, .box675, .box680 {
		width: 100%;
	}
	.title-desktop {
		display: none;
	}
	.title-mobile {
		display: block;
		margin-top: 7px;
	}
    .about-origin {
        width: 96%;
        height: 238px;
    }
@media screen and (max-width: 666px) {
	.box636, .box620 {
		width: 100%;
	}
	
	.youtube iframe, .youtube{
		width: 100%;
	}
    .guide-box-img-02 {
        margin: 0 auto 20px;
    }
    .guide-box-txt-02,
    .flex-box-01-01,
    .flex-box-01-03
    {
        width: 100%;
	    flex-basis: 100%;
        margin-left: 0;
    }   
    .flex-box-01-02,
    .flex-box-01-04
    {
        margin: 20px auto 20px;
    }
	
}
@media screen and (max-width: 625px) {
	.box600, .box590 {
		width: 100%;
	}
}
@media screen and (max-width: 588px) {
	.box560, .box580 {
		width: 100%;
	}
    .quality-policy {
        font-size: 1.6rem;
        width: 90%;
        margin: 30px auto 40px;
    }
    .quality-policy h2 {
        font-size: 2rem;
        text-align: center;
    }
}
@media screen and (max-width: 540px) {
    h1.page-title {
        font-size: 21px;
    }
    h1.page-title .cat {
        font-size: 14px;
        line-height: 20px;
    }
	.desktop-view {
		display: none;
	}
	.mobile-view {
		display: block;
	}
	#main-image p{
		font-size: 9px;
		font-size: 0.9rem;
		line-height: 1.25em;
		width: 53%;
	}
	.guide-item {
		float: none;
		width: 96%;
		height: 180px;
		margin-left: 2%;
		margin-right: 2%;
	}
    .guide-tab-boxi-inn ul li, .guide-tab-boxi-inn ul li > a {
	    width:123px;
	    height: 34px;
	    margin-right: 2%;
    }
	#sidebox > .sidebox-contact a.desktop {
		display: block;
	}
	#sidebox > .sidebox-contact a.mobile {
		display: none;
	}
	#sidebox > .sidebox-contact {
		width: 250px;
	}
	#sidebox > .sidebox-banner {
		width: 100%;
	}
	#sidebox > .sidebox-banner > .banner {
		float: none;
		width: 250px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 12px;
	}
	div.super-air-heater {
		background-position: 38px top;
	}
	div.halogen-spot-heater {
		background-position: 20px top;
	}
	div.halogen-line-heater {
		background-position: 25px top;
	}
	div.super-beam-heater {
		background-position: 0 top;
	}
	div.ultraviolet-irradiation {
		background-position: 0 top;
	}
	div.metal-halide-lighting {
		background-position: -20px top;
	}
	div.led-light-source {
		background-position: 0px top;
	}
	div.solar-simulator {
		background-position: -50px top;
	}
	.box506, .box500 {
		width: 100%;
	}
	.youtube iframe, .youtube{
		height: 293px;
	}

}
@media screen and (max-width: 450px) {
		.box430 {
			width: 100%;
		}
	}
@media screen and (max-width: 416px) {
	.imagebox-380, .imagebox-380r {
		width: 96%;
	}
	.guide-box-img, .box380 {
		width: 100%;
	}
	#mobile-sitemap li.end {
		display: block !important;
	}
    .guide-tab-boxi-inn ul li, .guide-tab-boxi-inn ul li > a {
	    width:107px;
	    height: 29px;
        font-size: 12px;
	    font-size: 1.2rem;
    }
    .guide-tab-boxi-inn ul li.selected, .guide-tab-boxi-inn ul li > a {
        padding: 10px 20px 0;
    }
}
@media screen and (max-width: 370px) {
    #footer-contact {
        width: 100%;
    }
	.box360 {
		width: 100%;
	}
    .quality-policy {
        width: 96%;
    }
}
@media screen and (max-width: 370px) {
	.box360 {
		width: 100%;
	}
    .quality-policy
    {
        width: 96%;
    }
    .imagebox-300 {
        width: 98%;
    }
}