@charset "utf-8";

/*
Theme Name:	TAKAGI
Description: TAKAGI
Author: Ryowan Inc.
Version: 1.0.0
*/


/* RESET */
html {line-height: 1.15;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
body {margin: 0;}
main {display: block;}
p,table,blockquote,address,pre,iframe,form,figure,dl {margin: 0;}
h1,h2,h3,h4,h5,h6 {font-size: inherit;line-height: inherit;font-weight: inherit;margin: 0;}
ul,ol {margin: 0;padding: 0;list-style: none;}
dt {font-weight: bold;}
dd {margin-left: 0;}
hr {box-sizing: content-box; height: 0;overflow: visible;border: 0;border-top: 1px solid;margin: 0;clear: both;color: inherit;}
pre {font-family: monospace, monospace; font-size: inherit;}
address {font-style: inherit;}
a {background-color: transparent;text-decoration: none;color: inherit;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
b,strong {font-weight: bolder;}
code,kbd,samp {font-family: monospace, monospace;font-size: inherit;}
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;vertical-align: bottom;max-width: 100%;width: 100%; height: auto;}
embed,object,iframe {border: 0;vertical-align: bottom;}
button,input,optgroup,select,textarea {-webkit-appearance: none;appearance: none;vertical-align: middle;color: inherit;font: inherit;border: 0;background: transparent;padding: 0;margin: 0;outline: 0;border-radius: 0;text-align: inherit;}
[type='checkbox'] {-webkit-appearance: checkbox;appearance: checkbox;}
[type='radio'] {-webkit-appearance: radio;appearance: radio;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,[type='button'],[type='reset'],[type='submit'] {cursor: pointer;-webkit-appearance: none;appearance: none;}
button[disabled],[type='button'][disabled],[type='reset'][disabled],[type='submit'][disabled] {cursor: default;}
button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {margin: 0;padding: 0;border: 0;min-width: 0;}
legend {color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type='checkbox'],[type='radio'] {padding: 0;}
[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button {height: auto;}
[type='search'] {outline-offset: -2px;}
[type='search']::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
label[for] {cursor: pointer;}
details {display: block;}
summary {display: list-item;}
table {border-collapse: collapse;border-spacing: 0;}
caption {text-align: left;}
td,th {vertical-align: top;}
th {text-align: left;font-weight: bold;}
template {display: none;}
[hidden] {display: none;}
i{font-style: normal;}

*:focus {outline:0;}

/* padding,border内側設定 */
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
::before,::after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}

/* HTML5 */
article, aside, figure, figcaption, footer, header, nav, section{display: block;}



/* ==================================
	Common
	================================== */
html{
	font-family: 'PT Serif', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 15px;
	word-spacing: 1px;
	letter-spacing: .17em;
	line-height: 1.7;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-font-feature-settings: "palt";
	-ms-font-feature-settings: "palt";
	-o-font-feature-settings: "palt";
	font-feature-settings: "palt";
	overflow: auto;
    color: #302322;
}
body {
    overflow-y: scroll;
    overflow-x: hidden;
}
.pc{
	display: block;
}
.sp{
	display: none;
}

.invisible {
	opacity: 0;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.visible {
	opacity: 1;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.fDi{
  	opacity: 0;
  	transform: translate(0, 30px);
  	transition: all .7s cubic-bezier(0.645,0.045,0.355,1.000);
}
.fDi.is-show {
  	opacity: 1 !important;
  	transform: translate(0, 0);
  	transition: all .7s
}
.msg-wrap{
 	opacity: 0;
  	transform: translate(0, 30px);
  	transition: all .7s cubic-bezier(0.645,0.045,0.355,1.000);
}
.show.msg-wrap{
	opacity: 1 !important;
  	transform: translate(0, 0);
  	transition: all .7s
}
@media (max-width: 780px){
	html{
		font-size: 15px;	
	}
	.pc{
		display: none;
	 }
	 .sp{
		display: block;
	 }
}
/* ==================================
	Common item
	================================== */
.flex-container {
    display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.inner{
	width: 83.6%;
	margin: 0 auto;
}
h2{
	font-size: 1.8em;
    margin: .2em 0 .8em;
}
h3{
	font-size: 22px;
}
.text-box{
	line-height: 2;
	letter-spacing: 0.2em;
}
.sns{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}
.sns span a{
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	margin-right: 24px;
}
.sns .twi a{
	background-image: url("images/common/twi.png");
	width: 20px;
	height: 17px;
}
.sns .face a{
	background-image: url("images/common/face.png");
	width: 21px;
	height: 21px;
}
.sns .you a{
	background-image: url("images/common/you.png");
	width: 23px;
	height: 16px;
}
.content-img{
	object-fit: cover;
}
/* ==================================
    FONT
    ================================== */
.font-sans,.text-box{
    font-family:  YakuHanJP, YuGothic,"Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}
/* ==================================
	header
	================================== */
.header-wrap {
	position: fixed;
	width: 100%;
	z-index: 100;
}
.header-wrap.show .header-inner{
	color: #000;
}
.header-wrap.show.hide .header-inner{
	color: #fff;
}
.header-wrap.show .header-inner .r-header-inner{
	border: solid 1px #000;
}
.header-wrap.show .header-inner .menu-btn li{
	background-color: #000;
}
.header-wrap.show.hide .header-inner .r-header-inner{
	border: solid 1px #fff;
}
.header-wrap.show.hide .header-inner .menu-btn li{
	background-color: #fff;
}
.header-inner{
	width: 93%;
    margin: 48px auto;
    position: absolute;
    left: 3.5%;
	color: #fff;
}
.opn .header-inner{
	color: #000;
	z-index: 1;
}
.header-wrap .header-inner{
	font-size: 12px;
}
.header-inner .font-serif{
	position: relative;
}
.l-header {
    position: absolute;
}
.r-header {
    position: absolute;
    right: 0;
}
.l-header-inner{
	width: 50px;
	height: 50px;
}
.menu-btn{
	width: 100%;
	height: 100%;
	letter-spacing: 0.05em;
}
.menu-btn li{
	width: 36px;
	height: 2px;
	background-color: #fff;
	margin-bottom: 8px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.menu-btn p{
	-webkit-transition: .05s;
	-o-transition: .05s;
	transition: .05s;
}
.opn .menu-btn p{
	opacity: 0;
}
.opn .menu-btn li{
	background-color: #000;
}
.opn .menu-btn li:first-child{
	transform: rotate(45deg);
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	margin-bottom: -2px;
}
.opn .menu-btn li:last-child{
	transform: rotate(-45deg);
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	margin-bottom: 0;
}
.menu-btn li:last-child{
	margin-bottom: 4px;
}
.r-header-inner{
	border: solid 1px #fff;
}
.opn .r-header-inner{
	border: solid 1px #000;
}
.r-header-inner a{
	padding: 20px 30px;
	display: block;
}
.nav{
	display: none;
	z-index: 99;
}
.opn .nav{
	display: block;
}
.nav-wrap .flex-container{
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
}
.opn .nav-wrap{
	opacity: 1;
	display: block;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	pointer-events: all;
}
.nav-wrap{
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	position: relative;
	color: #000;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.nav-inner {
    width: 83%;
	margin: 0 auto;
    top: 50%;
    position: relative;
    transform: translate(0, -50%);
}
.nav-unit{
	width: 25%;
}
.nav-info{
	width: 25%;
}
.nav-img{
	width: 40%;
}
.nav-lst li{
	font-size: 22px;
    letter-spacing: 0.3em;
    margin-bottom: 20px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.nav-img, .nav-img-bg {
    height: 400px;
    position: relative;
}
.nav-img-index, .nav-img-page {
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-transition: transform .7s ease 0s,opacity .7s ease 0s;
    transition: transform .7s ease 0s,opacity .7s ease 0s;
}
.nav-img.active .nav-img-index {
    opacity: 0;
    -webkit-transition: transform .7s ease 0s,opacity .7s ease 0s;
    transition: transform .7s ease 0s,opacity .7s ease 0s;
}
.nav-img-page.active {
    opacity: 1;
}
.nav-img-index {
    opacity: 1;
}
.nav-img-index{
	background-image: url("images/common/thumb-index.png")
}
.nav-img-page:nth-child(1){
	background-image: url("images/common/thumb-top.png")
}
.nav-img-page:nth-child(2){
	background-image: url("images/common/thumb-quality.png")
}
.nav-img-page:nth-child(3){
	background-image: url("images/common/thumb-knowledge.png")
}
.nav-img-page:nth-child(4){
	background-image: url("images/common/thumb-products.png")
}
.nav-img-page:nth-child(5){
	background-image: url("images/common/thumb-gallery.png")
}
.nav-img-page:nth-child(6){
	background-image: url("images/common/thumb-about.png")
}
.nav-info .tel,
.nav-info .cont{
	font-size: 20px;
	margin-bottom: 16px;
}
.nav-info-inner div{
	margin-bottom: 8px;
}
.nav-info-inner div:nth-of-type(3){
	margin-bottom: 16px;
}
.nav-info-inner .sns p{
	font-size: 16px;
	margin-right: 24px;
}
.nav .sns .twi a{
	background-image: url("images/common/twi-b.png");
}
.nav .sns .face a{
	background-image: url("images/common/face-b.png");
}
.nav .sns .you a{
	background-image: url("images/common/you-b.png");
}
.nav-info-inner .sns span a{
	margin-right: 12px;
}
.sns a{
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.r-header-inner{
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	}
.menu-btn{
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
@media screen and (min-width:751px){
	.nav-lst li:hover{
		opacity: .3;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
}
	.menu-btn:hover{
		opacity: .5;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
}
	.sns a:hover{
		opacity: .7;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
	.r-header-inner:hover{
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		background-color: #000;
		color: #fff;
	}
}
/* ==================================
	Top
	================================== */
.fv-wrap{
	height: 100vh;
	width: 100%;
	position: relative;
}
video {
    position: absolute;
    width: 100%;
    height: 100%;
	object-fit: cover;
}
h1.logo{
	background-image: url("images/top/logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 101px;
	height: 360px;
	top: 50%;
	right: -50%;
	transform: translate(-50%, -50%);
	position: relative;
}
.fix-scroll{
  width: 20px;
  height: 200px;
  position: absolute;
  bottom: 0;
  left: 4%;
  line-height: 20px;
}
.fix-scroll .scroll-wrap {
  position: static;
  right: 0;
  bottom: 0;
}
.fix-scroll .scroll-inner p {
  font-size: .87em;
  cursor: vertical-text;
  direction: rtl;
  writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -moz-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: sideways-right;
  -o-text-orientation: sideways-right;
  -ms-text-orientation: upright;
  -ms-text-orientation: sideways-right;
  -moz-text-orientation: sideways-right;
  -webkit-text-orientation: sideways-right;
  letter-spacing: .15em;
  color: #fff;
}
.fix-scroll .scroll-bar {
  width: 1px;
  height: 120px;
  background-color: #79746e;
  position: absolute;
  bottom: 0;
  left: 9px;
  overflow: hidden;
}
.fix-scroll .scroll-bar::before {
  content: '';
  width: 1px;
  height: 120px;
  background-color: #fff;
  position: absolute;
  display: block;
  top: -120px;
  left: 0;
  -webkit-animation: scroll-bar 3.5s ease 0s infinite normal;
  animation: scroll-bar 3.5s ease 0s infinite normal;
}
@keyframes scroll-bar {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 120px, 0);
    transform: translate3d(-50%, 120px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 120px, 0);
    transform: translate3d(-50%, 120px, 0);
  }
}
/* ==================================
	msg
	================================== */
.msg-wrap{
	margin: 120px 0;
}
.msg-wrap .flex-container{
	align-items: center;
}
.msg-wrap .l-box{
	width: 63%
}
.msg-wrap .r-box{
    width: 38%;
}
.msg-wrap .r-box h3{
	margin-bottom: 40px;
	letter-spacing: 0.08em;
	line-height: 1.36;
}
.msg-img{
	background-image: url("images/top/msg-img.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 45vw;
	height: 45vw;
}
/* ==================================
	about
	================================== */
.about-top{
	height: 528px;
	background-image: url("images/top/about-top.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
}
.about-inner{
	margin: 160px 0;
}
.flex-container .title-inner{
	align-items: center;
	justify-content: space-between;
}
.flex-container.contents-inner{
	align-items: center;
	justify-content: space-between;
}
.title-inner{
	margin-bottom: 56px;
}
.title-inner::after {
	content: "";
    width: 496px;
    height: 1px;
    background-color: #000;
	position: absolute;
	margin-top: 88px;
}
.top-img{
	background-repeat: no-repeat;
	background-size: cover;
	width: 50vw;
	height: 37.3vw;
}
.qlt-img{
	background-image: url("images/common/thumb-quality.png")
}
.know-img{
	background-image: url("images/common/thumb-knowledge.png")
}
.product-img{
	background-image: url("images/common/thumb-products.png")
}
.gallery-img{
	background-image: url("images/common/thumb-gallery.png")
}
.l-box .title-inner::after {
	left: -112px;
}
.contents-inner .text-box-wrap .text-box{
	margin-bottom: 55px;
}
.contents-inner .text-box-wrap{
	width: 33.7%
}
.view-more{
	font-size: 12px;
	line-height: 40px;
	letter-spacing: 0.2em;
	position: relative;
	display: inline-block;
	
}
.view-more a{
	display: block;
	padding-right: 80px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	
}
.view-more::before{
	content: "";
	border: 1px #000 solid;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	position: absolute;
	right: 0;
	pointer-events: none;
}
.view-more::after{
	content: "";
	height: 1px;
	width: 40px;
	background-color: #000;
	position: absolute;
    top: 50%;
    right: 20px;
	pointer-events: none;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.about-inner .flex-container.contents-inner{
	margin-bottom: 120px;
}
@media screen and (min-width:751px){
	.view-more:hover a{
		opacity: .5;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
	.view-more:hover::after{
		right: 0;
		opacity: .4;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
		.view-more:hover::before{
		opacity: .4;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
}
/* ==================================
	common-top
	================================== */
.content-title{
	height: 400px;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}
.content-title .inner{
	height: 100%;
	width: 83.6%
}
.title-box{
	position: relative;
    top: 50%;
    transform: translate(0, -50%);
	color: #fff;
}
.title-box h5{
	font-size: 1.2em;
}
/* ==================================
	read-box
	================================== */
.read-box{
	margin-top: 160px;
}
.read-inner h3{
	margin-bottom: 64px;
	letter-spacing: 0.08em;
}
.read-box .text-box{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.read-box .text-box p {
    width: 47.5%;
    text-align: justify;
}
/* ==================================
	other-contents
	================================== */
.other-contents{
	width: 100%;
    padding: 160px 0;
    background-color: #f8f8f8;
	position: relative;
}
.other-contents h2{
	margin-bottom: 64px;
}
.other-contents .flex-container{
	justify-content: space-between;
	flex-flow: row wrap;
}
.other-box{
	width: 25vw;
}
.other-contents .other-box div{
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 18.6vw;
	margin: 0 40px 24px 0;
	position: relative;
}
.other-img1{
	background-image: url("images/common/thumb-quality.png");
}
.other-img2{
	background-image: url("images/common/thumb-knowledge.png");
}
.other-img3{
	background-image: url("images/common/thumb-products.png");
}
.other-img4{
	background-image: url("images/common/thumb-gallery.png");
}
.other-box p:first-of-type{
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.12em;
}
.other-box p:last-of-type{
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.08em;
}
.other-contents a div::after{
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: .5s;
}
.other-contents .flex-container .fDi:nth-child(1){
	transition-delay: 0.3s
}
.other-contents .flex-container .fDi:nth-child(2){
	transition-delay: 0.6s
}
.other-contents .flex-container .fDi:nth-child(3){
	transition-delay: 0.9s
}
@media screen and (min-width:751px){
	.other-contents a div:hover::after{
		opacity: .6;
	}
}
/* ==================================
	content-box
	================================== */
.content-box{
	margin: 160px 0;	
}
.content-box .flex-container{
	align-items: center;
	justify-content: space-between;
	flex-flow: row wrap;
	margin-bottom: 64px;
}
.content-box .flex-container:last-child{
	margin-bottom: 0;
}
.content-box .l-box{
	background-size: cover;
	background-repeat: no-repeat;
	padding-right: 78px;
}
.content-box .img1{
	background-image: url("images/about/img1.png");
}
.content-box .img2{
	background-image: url("images/about/img2.png");
}
.content-box .img3{
	background-image: url("images/about/img3.png");
}
.content-box .r-box h3{
	margin-bottom: 32px;
}
/* ==================================
	quality-box
	================================== */
.quality .content-title{
	background-image: url("images/quality/quality-top.png");
}
.quality .content-box .img1{
	background-image: url("images/quality/img1.png");
}
.quality .content-box .img2{
	background-image: url("images/quality/img2.png");
}
.quality .content-box .img3{
	background-image: url("images/quality/img3.png");
}
/* ==================================
	knowledge-box
	================================== */
.knowledge .content-title{
	background-image: url("images/knowledge/knowledge-top.png");
}
.knowledge .content-box .img1{
	background-image: url("images/knowledge/img1.png");
}
.knowledge .content-box .img2{
	background-image: url("images/knowledge/img2.png");
}
.knowledge .content-box .img3{
	background-image: url("images/knowledge/img3.png");
}
.knowledge .content-box .img4{
	background-image: url("images/knowledge/img4.png");
}
/* ==================================
	products-box
	================================== */
.products .content-title{
	background-image: url("images/products/products-top.png");
}
.products .content-box .img1{
	background-image: url("images/products/img1.png");
}
.products .content-box .img2{
	background-image: url("images/products/img2.png");
}
.products .content-box .img3{
	background-image: url("images/products/img3.png");
}
.products .content-box .img4{
	background-image: url("images/products/img4.png");
}
.products .content-box .img5{
	background-image: url("images/products/img5.png");
}
.box-inner div{
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.space.is-empty {
  	height: 0;
  	padding-top: 0;
  	padding-bottom: 0;
  	margin-top: 0;
  	margin-bottom: 0;
	list-style: none;
}
.s-pt2.flex-container .fDi:nth-child(1),
.s-pt2.flex-container .fDi:nth-child(4){
	transition-delay: 0.2s
}
.s-pt2.flex-container .fDi:nth-child(2),
.s-pt2.flex-container .fDi:nth-child(5){
	transition-delay: 0.4s
}
.s-pt2.flex-container .fDi:nth-child(3){
	transition-delay: 0.6s
}
.s-pt2 .box-inner p{
	margin-top: 24px;
}
@media screen and (min-width:751px){
	.products .box-inner .img-wrap img:hover{
		opacity: .6;
		transition: 0.5s;
	}
}
/* ==================================
	gallery-box
	================================== */
.gallery .content-title{
	background-image: url("images/gallery/gallery-top.png");
}
.box-inner h4{
	font-size: 18px;
	margin-bottom: 20px;
}
.img-wrap {
  	background: #000;
}
.img-wrap img{
	transition: 0.5s;
}
@media screen and (min-width:751px){
	.gallery .box-inner .img-wrap img:hover{
		opacity: .6;
		transition: 0.5s;
	}
}
/* ==================================
	gallery-detail
	================================== */
.gallery-detail .content-title{
	background-image: url("images/gallery/gallery-top.png");
}
.gallery-detail .content-box .l-box {
    width: 50vw;
    height: auto;
}
.gallery-detail .content-box .r-box {
    width: 30vw;
}
.gallery-detail .other-img1{
	background-image: url("images/common/thumb-products.png");
}
 .s-pt2{
	counter-reset: number 0
}
.gallery-detail .s-pt2 h3{
	margin-bottom: 24px;
}
.gallery-detail .s-pt2 h3::before{
	counter-increment: number 1; 
	content: counter(number) ".";
}
.gallery-detail .s-pt2 .content-img{
	width: 100%;
	height: 18.7vw;
}
.gallery-detail .content-box ul.flex-container {
    align-items: flex-start;
}
.gallery-detail .box-inner{
	width: 25vw;
	height: 100%;
}
.gallery-detail .s-pt2{
	margin: 100px 0 160px;
}
.gallery-detail .other-contents .inner{
	border-top: solid 2px #000;
    padding: 160px 0;
}
.gallery-detail .other-box{
	width: 25vw;
}
.gallery-detail .other-box div{
	width: 100%;
    height: 25vw;
}
.gallery-detail .other-contents,
.products-detail .other-contents{
	padding: 0;
    background-color: #fff;
}
/* ==================================
	products-detail
	================================== */
.products-detail .content-title{
	background-image: url("images/products/products-top.png");
}
.product-detail-img{
	width: 50vw;
    height: auto;
}
.products-detail .content-box .flex-container{
	align-items: flex-start;
	margin-bottom: 0;
}
.products-detail .content-box .flex-container:last-child{
	margin-bottom: 100px;
}
.products-detail .pt1 .title-inner{
	margin-bottom: 0;
}
.products-detail .content-box .l-box{
	padding-right: 60px;
}
.products-detail .content-box{
	margin: 160px 0 0;
}
.products-detail .content-box.s-pt5{
	margin: 0 0 160px;
}
.products-detail .pt1 .text-box-wrap .text-box{
	margin-bottom: 0;
	padding-bottom: 40px;
	border-bottom: 1px solid #000;
}
.products-detail .text-box-wrap .text-box-detail{
	margin: 40px 0 32px;
}
.products-detail .onlinestore {
    padding: 20px 30px;
    display: inline-block;
	border: solid #000 1px;
}
.products-detail .s-pt5 .flex-container{
	justify-content: flex-start;
}
.products-detail .other-contents .inner{
	border-top: solid 2px #000;
    padding: 160px 0;
    margin: 160px auto 0;
}
.products-detail .other-contents .content-box{
	margin: 0;
}
.products-detail .about-inner{
	background-color: #f8f8f8;
	margin: 0;
	padding: 160px 0;
}
.products-detail .about-inner .flex-container.contents-inner{
	margin-bottom: 0px;
}
.products-detail p.products-description {
    margin: 2em 0 0;
}
.products-detail h4 {
    margin: 0 0 1.4em;
}

/* ==================================
	about
	================================== */
.about .content-title {
    background-image: url("images/about/about-fv.png");
}
.about .text-box {
    display: block;
}
.about .text-box p {
    width: 100%;
} 
.about .target-box {
    margin: 160px auto;
}
.about .target-box .summery dt {
    width: 20%;
    float: left;
    padding: 1.5em 0;
    border-top: 1px solid #ddd;
}
.about .target-box .summery dd {
    margin-left: 20%;
    padding: 1.5em 0;
    border-top: 1px solid #ddd;
}
.about .target-box .summery dd ul.business li {
    line-height: 2em;
}
.about .target-box .summery dt:last-child,
.about .target-box .summery dd:last-child {
    border-bottom: 1px solid #ddd;
}

/* ==================================
	s-pt
	================================== */
.s-pt1 .l-box{
	width: 28vw;
	height: 21vw;
}
.s-pt1 .r-box{
	width: 60.4%;
	line-height: 2;
	letter-spacing: 0.2em;
}
.s-pt2 .content-img{
	width: 100%;
	height: 25vw;
}
.s-pt2 .box-inner,
.space{
	width: 25vw;
	height: 100%;
	margin-bottom: 60px;
}
.s-pt2 .box-inner:nth-child(4),
.s-pt2 .box-inner:nth-child(5),
.s-pt2 .box-inner:nth-child(6){
	margin-bottom: 0px;
}
.s-pt3 .content-img{
	width: 100%;
	height: 29.6vw;
}
.s-pt3 h4{
	margin-top: 24px;
}
.s-pt3 .box-inner{
	width: 39.5vw;
	height: 100%;
}
.s-pt4 .l-box,
.s-pt6 .box-inner{
	height: 29.6vw;
	width: 39.5vw;
}
.s-pt4 .r-box{
	width: 40vw;
}
.s-pt4{
	margin: 160px 0 100px 0;
}
.s-pt5{
	margin: 0;
}
.s-pt5 .content-img{
	width: 100%;
	height: 37.3vw;
}
.s-pt5 .box-inner{
	width: 49.7vw;
	height: 100%; 
	margin-bottom: 100px;
}
.s-pt5 .flex-container{
	justify-content: center;
}
.s-pt5 h3{
	margin-bottom: 48px;
}
.s-pt5 .box-inner p{
	margin-bottom: 48px;
}
.s-pt5 .text-box{
	width: 49.7vw;
}
.s-pt6 .content-img{
	height: 100%;
}
.s-pt6{
	margin: 100px 0 160px 0;
}
/* ==================================
	footer
	================================== */
.footer-wrap{
	color: #fff;
}
.footer-container{
	height: 100vh;
	width: 100vw;
	background-image: url("images/about/footer-img.png");
	background-size: cover;
	background-repeat: no-repeat;
}
.footer-container .inner{
	height: 100%;
}
.footer-container .inner .flex-container{
	transform: translate(0, -50%);
	top: 50%;
	position: relative;
	justify-content: space-between;
	align-items: center;
}
.footer-container .l-box.map{
	background-image: url("images/common/map.png");
	background-size: cover;
	background-repeat: no-repeat;
	width: 538px;
	height: 438px;
}
.footer-container .r-box.info{
	width: 538px;
}
.footer-container .r-box.info li{
	border-bottom: solid #a0a0a0 1px;
	margin-bottom: 34px;
	padding-bottom: 34px;
}
.footer-container .r-box.info li:first-child p{
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.08em;
}
.footer-container .r-box.info li:nth-child(2) p{
	margin-bottom: 8px;
}
.footer-container .r-box.info li:nth-child(2) a{
	font-size: 12px;
	border-bottom: 1px solid #fff;
	position: relative;
}
.footer-container .r-box.info li:nth-child(2) a::after{
	content: "";
	background-image: url("images/common/squea.png");
	width: 15px;
	height: 11px;
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
	top: 30%;
	right: -24px;
}
.footer-container .r-box.info li:nth-child(3) p:first-child{
	margin-bottom: 8px;
}
.footer-container .r-box.info li:nth-child(3) p:last-child{
	font-size: 12px;
}
.footer-inner{
	height: 100px;
	background-color: #000;
}
.footer-inner .inner{
	height: 100%;
}
.footer-inner .inner .flex-container{
	transform: translate(0, -50%);
	top: 55%;
	position: relative;
	justify-content: space-between;
	font-size: 13px;
	letter-spacing: 0.06em;
}
.footer-inner .l-box a{
	margin-right: 19px;
	position: relative;
}
.footer-inner .l-box{
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.footer-inner .l-box a:nth-child(1)::after{
	content: "";
	background-image: url("images/common/squea.png");
	width: 15px;
	height: 11px;
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
	top: 14%;
	right: -24px;
}
	.footer-container li a{
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
@media screen and (min-width:751px){
	.footer-container li a:hover{
		opacity: .7;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
	.footer-inner .l-box:hover{
		opacity: .7;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
	}
}

@media screen and (max-width:750px){
    .header-inner {
        width: 92%;
        margin-top: 4%;
        left: 4%;
    }
    .nav-wrap .flex-container {
        
    }
    .nav-unit,
    .nav-info{
        width: 100%;
    }
    .nav-info {
        margin-top: 7vh;
    }
    .nav-img {
        display: none;
    }
	.flex-container {
       flex-direction: column;
    }
    .flex-container.flex-rev {
        flex-direction: column-reverse;
    }
    .flex-container .title-inner {
        flex-direction: row;
    }
    .msg-wrap .l-box,
    .msg-wrap .r-box{
        width: 100%
    }
    .msg-wrap .l-box {
        margin-bottom: 7vh;
    }
    .msg-img{
        width: 83.6vw;
        height: 83.6vw;
    }
    .top-img {
        width: 83.6vw;
        min-height: 62.7vw;
        height: 100%;
    }
    .contents-inner .text-box-wrap {
        width: 100%;
        margin-top: 3.2vh;
    }
    .read-box .text-box {
        display: block;
    }
    .read-box .text-box p {
        width: 100%;
    }
    .content-box .flex-container {
        flex-direction: column;
    }
    .s-pt1 .l-box {
        width: 83.6vw;
        height: 62.7vw;
    }
    .s-pt1 .r-box {
        width: 100%;
        margin-top: 3.2vh;
    }
    .s-pt2 .box-inner, .space {
        width: 100%;
        margin-bottom: 3.2vh;
    }
    .s-pt2 .box-inner:nth-child(4), .s-pt2 .box-inner:nth-child(5) {
        margin-bottom: 3.2vh;
    }
    .s-pt2 .box-inner:last-child {
        margin-bottom: 0;
    }
    .s-pt2 .content-img {
        height: 100%;
    }
    .other-contents .flex-container {
        flex-direction: column;
    }
    .other-box {
        width: 100%;
        margin-bottom: 7vh;
    }
    .other-contents .other-box div {
        height: 62.7vw;
    }
    .footer-container .l-box.map {
        width: 83.6vw;
        height: 69vw;
    }
    .footer-container .r-box.info {
        width: 100%;
        margin-top: 7vh;
    }
}