/*
Theme Name: med-miyata
Theme URI: http://www.med-miyata.co.jp/
Author: Shinya Sugio
Author URI: http://www.sugio-sugio.com/
Description: 有限会社ミヤタ電機設計
Version: 1.1
Tags: white, white, blue, black, minimal
Text Domain: 有限会社ミヤタ電機設計
*/
@charset "utf-8";

/* Common */

:root{
	--def_color-txt:#463c37;
	--def_color-white:#fff;
	--def_color-ci:#0062c8;
	--def_color-ci-pale:#f2f7fc;
	--def_color-bg:#f0ebe6;
	--def_color-bg-hl:#0062c8;
	--def_color-bg-menu: rgba(255,255,255,0.97);
	--def_color-bg-menu-st: rgba(255,255,255,0.8);
	--def_color-contact: rgba(0,98,200,0.97);
	--def_color-line:#c7c4c3;
	--def_color-line_pale:#f0ebe6;

	--def_fontWeight-light:200;
	--def_fontWeight-normalJp:300;
	--def_fontWeight-normalEn:400;
	--def_fontWeight-semibold:500;
	--def_fontWeight-bold:700;

	--def_margin-basic:40px;
	/*--def_margin-basic:2.75vw;*/
	--def_margin-n01:calc(var(--def_margin-basic) * 0.25);
	--def_margin-n02:calc(var(--def_margin-basic) * 0.375);
	--def_margin-n03:calc(var(--def_margin-basic) * 0.5);
	--def_margin-n04:calc(var(--def_margin-basic) * 0.7);
	--def_margin-n05:calc(var(--def_margin-basic) * 0.75);
	--def_margin-w01:calc(var(--def_margin-basic) * 1.125);
	--def_margin-w02:calc(var(--def_margin-basic) * 1.25);
	--def_margin-w03:calc(var(--def_margin-basic) * 1.5);
	--def_margin-w04:calc(var(--def_margin-basic) * 2);
	--def_margin-w05:calc(var(--def_margin-basic) * 3);
	--def_margin-w06:calc(var(--def_margin-basic) * 4);

	--def_margin-window01:var(--def_margin-basic);
	--def_margin-window02:calc(var(--def_margin-window01) * 2.25);
	--def_margin-window03:calc(var(--def_margin-window01) * 3.25);
	--def_margin-window04:calc(var(--def_margin-window01) + var(--def_margin-window03));

	--def_width-logo-home:210px;
	--def_width-logo:160px;
	--def_width-logo-narrow:125px;

	--def_radius-n01:calc(var(--def_margin-n01) * 0.5);
	--def_radius-n02:var(--def_margin-n01);
	--def_radius-n03:var(--def_margin-n03);
	--def_radius-basic:var(--def_margin-basic);
	--def_radius-w01:var(--def_margin-w03);
	--def_radius-w02:var(--def_margin-w04);
	--def_radius-w03:var(--def_margin-w05);

	--def_switchPoint_logo:200px;
	--def_switchPoint_header:300px;
	--def_switchPoint_copy:400px;

	--def_numSwiperSlide:2.4;
	--def_marginSwiperSlide:60;
	}

/* Tag */
*{
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-image:none;
	border:0;
	text-decoration:none;
	position:relative;
	align-content: flex-start;
	}
*:focus{
	outline:none;
	}
html{
	font-size:62.5%;
	}
body{
	font-size:1.6rem;
	line-height:1.5em;
	letter-spacing:0.075em;
	font-family: 'Plus Jakarta Sans',"dnp-shuei-gothic-gin-std","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: var(--def_fontWeight-normalJp);
	font-style:normal;
	font-feature-settings:"palt" 1;
	color:var(--def_color-txt);
	text-align:left;
	width:100%;
	height:100%;
	word-wrap:break-word;
	background-color: var(--def_color-bg);
	overflow-x: auto;
	}
div{
	align-content: flex-start;
	}
a{
	color:var(--def_color-txt);
	transition:opacity 0.2s, color 0.2s, background-color 0.2s;
	cursor:pointer;
	}
a:hover{
	opacity:0.7;
	}
h1,h2,h3,h4,h5{
	line-height: 1.4em;
	font-weight: 500;
	display: block;
	}
h3{
	font-size: 1em;
	}
h4{
	font-size: 1em;
	}
h5{
	font-size: 1em;
	}
p{
	letter-spacing: 0.075em;
	line-height:2.25em;
	}
p a{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	color: var(--def_color-ci);
	}
img,video{
	width:100%;
	}
table{
	width: 100%;
	border-collapse:separate;
	border-spacing:0px;
	border-top: 1px solid var(--def_color-line_pale);
	}
td,th{
	padding:2em 1em;
	font-size: 0.9375em;
	border-bottom: 1px solid var(--def_color-line_pale);
	line-height: 1.75em;
	vertical-align: middle;
	align-content: unset;
	}
th{
	font-size: 0.85em;
	font-weight: 500;
	}
thead th:not(:first-of-type){
	font-weight: 600;
	color: var(--def_color-ci);
	font-size: 0.9375em;	
	}
table caption{
	caption-side: bottom;
	text-align: left;
	font-size: 0.8em;
	line-height: 2em;
	margin-top: var(--def_margin-basic);
	}
form{
	display: contents;
	}
input, select, textarea{
  font-family: 'Plus Jakarta Sans',"dnp-shuei-gothic-gin-std","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-feature-settings:"palt" 1;
  letter-spacing: 0.075em;
	border: 1px solid var(--def_color-line);
	padding: 1em;
	font-size: 1em;
	border-radius: var(--def_radius-n01);
	}
textarea{
	width: calc(100% - 1.6em);
	}
select{
	padding-right: 2.5em;
	-webkit-appearance: none;
	appearance: none;
	background-image: url(common/img/mark_btn_select.svg);
	background-repeat: no-repeat;
	background-size: 12px auto;
	background-position: right 1em center;
	cursor: pointer;
	}
/* Common */
.switchPoint{
	display:block;
	width:100%;
	height:1px;
	position:absolute;
	left:0;
	visibility: hidden;
	}
.switchPoint#pointHeader{
	top:var(--def_switchPoint_header);
	}
.switchPoint#pointLogo{
	top:var(--def_switchPoint_logo);
	}
.switchPoint#pointCopy{
	top:var(--def_switchPoint_copy);
	}
.container{
	min-height: 105vh;
	transition: opacity 0.6s;
	overflow: hidden;
	}

/* General */
.txtEn{
	letter-spacing: 0.025em;
	}
.txtExtended{
	transform: scaleY(0.95);
	transform-origin: top left;
	letter-spacing: 0.075em;
	}
.txtCopy{
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.75em;
	}
.txtFukidashi{
  text-align: center;
  line-height: 1.4em;
  padding: 0 var(--def_margin-n05);
	}
.txtFukidashi:before,.txtFukidashi:after{
  width:20px;
  height: 48px;
  display: block;
  position: absolute;
  top:0;
	}
.txtFukidashi:before{
  content: url(common/img/mark_voice_l.svg);
  left:0;
	}
.txtFukidashi:after{
  content: url(common/img/mark_voice_r.svg);
  right:0;
	}
.txtVertical{
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	}
.txtAnimationPhilosophy > span{
	opacity: 0;
	transition: opacity 1s;
	}
.txtAnimationPhilosophy > span.show{
	opacity: 1;
	}
.linkBtn{
	font-weight: 500;
	background-color: var(--def_color-white);
	border:1px solid var(--def_color-ci);
	color: var(--def_color-ci);
	border-radius: 30px;
	width:240px;
	height: 60px;
	line-height: 60px;
	padding:0px 1.5em;
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	}
.linkBtn:before{
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	position: absolute;
	top:50%;
	right:20px;
	transform: translateY(-50%);
	background-color: var(--def_color-ci);
	transition: transform 0.25s;
	}
.linkBtn:hover{
	color: var(--def_color-white);
	opacity: 1;
	}
.linkBtn:hover:before{
	transform: translateY(-50%) scale(100);
	}
.linkBtn.btnBack:before{
	left:20px;
	}
.linkArea{
	opacity:0;
	width:100%;
	height:100%;
	background-color: var(--def_color-white);
	position:absolute;
	top:0;
	left:0;
	}
a.linkArea:hover{
	opacity:0.3;
	}
.anchor{
	position: absolute;
	top:calc(-1 * var(--def_margin-w02));
	}
.fade{
	opacity:0;
	transition:transform 1s, opacity 1s;
	transform: translateY(var(--def_margin-n04));
	visibility: hidden;
	}
.fade.show{
	opacity:1;
	transform: translateY(0);
	visibility: visible;
	}
.fade:after{
	content: "";
	display: block;
	position: absolute;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	background-color: var(--def_color-bg);
	transform-origin: top right;
	transition: opacity 1.2s, transform 1s, right 0.2s;
	}
#areaHomePhilosophy.fade:after, footer.fade:after{
	opacity:0;
	}
.fade.show:after{
	transform: scaleX(0);
	right:-1px;
	}
#txtTest{
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ff0;
	z-index: 999;
	display: none;
	}

/* Swiper */
.swiper-container{
	overflow: hidden;
	position: relative; 
	display: grid;
	justify-items: center;
	height:100px;
	}
.swiper-wrapper{
	position: absolute !important;
	top: 0px;
	width:100% !important;
	height:100% !important;
	}
.swiper-slide{
	overflow: hidden;
	}
.swiper-slide .fixedHeight{
	overflow: hidden;
	border-radius: var(--def_radius-n03);
	}
.swiper-slide .image img{
	height: 100%;
	width: auto;
	}
.swiper-slide .linkBtn{
	font-size: 0.925em;
	line-height: 50px;
	padding: 0em 2.75em;
	display: grid;
	width: auto;
	height:50px;
	border: 0;
	border-radius: 25px;
	position: absolute;
	bottom: var(--def_margin-n05);
	right: var(--def_margin-n05);
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	}
.swiper-slide .linkBtn:before{
	background-color: var(--def_color-white);
	width: 5px;
	height: 5px;
	right: 17.5px;
	}
.swiper-slide a.linkArea{
	opacity:0;
	background-color: var(--def_color-bg);
	transition:opacity 0.2s;
	}
.swiper-slide a:hover.linkArea{
	opacity: 0.4;
	}
.swiper-pagination{
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: var(--def_margin-n01);
	grid-row-gap: var(--def_margin-n01);
	justify-content: center;
	position: absolute;
	bottom:0px;
	z-index: 100;
	}
.swiper-pagination span{
	border: 1px solid var(--def_color-txt);
	display: block;
	width: 10px;
	height:10px;
	box-sizing: border-box;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s;
	}
.swiper-pagination span.swiper-pagination-bullet-active{
	background-color: var(--def_color-txt);
	}
.swiper-button-prev,.swiper-button-next{
	display: grid;
	align-content: center;
	justify-content: center;
	width: 100px;
	height: 120px;
	background-color: var(--def_color-white);
	z-index: 100;
	cursor: pointer;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	}
.swiper-button-prev{
	left:0;
	border-radius: 0 60px 60px 0;
	}
.swiper-button-next{
	right:0;
	border-radius: 60px 0 0 60px;
	}
.swiper-button-prev img, .swiper-button-next img{
	width: 13px;
	height: 28px;
	transform: rotate(90deg) translateY(7px);
	}
.swiper-button-next img{
	transform: rotate(270deg) translateY(7px);
	}

/* NEWSループスライダー */
.loopSlider{
	display: grid;
	grid-auto-flow: column;
	overflow: hidden;
	}
.loopSlider .wrapper,
.loopSlider .wrapper ul{
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	align-content: center;
	}
.loopSlider .wrapper ul{
	padding-right:var(--def_margin-basic);
	}
.loopSlider .wrapper li p{
	white-space: nowrap;
	}
.loopSlider .wrapper li .date{
	padding-right:10px;
	}
.loopSlider .wrapper{
	perspective: 1000;
	-webkit-perspective: 1000;
	}
.loopSlider .wrapper ul{
	animation-name: none;
	animation-duration:24s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}
.loopSlider .wrapper ul:first-child{
	animation-name: kf-NewsLoop01;
	animation-delay: 0s;
	}
 
.loopSlider .wrapper ul:nth-child(2){
	animation-name: kf-NewsLoop02;
	animation-delay: -16s;
	}
 
.loopSlider .wrapper ul:last-child{
	animation-name: kf-NewsLoop03;
	animation-delay: -8s;
	}
@keyframes kf-NewsLoop01{
	0%{
		transform: translate3d(200%, 0, 0);
		}
	100%{
		transform: translate3d(-100%, 0, 0);
		}
	}
@keyframes kf-NewsLoop02{
	0%{
		transform: translate3d(100%, 0, 0);
		}
	to{
		transform: translate3d(-200%, 0, 0);
		}
	}
@keyframes kf-NewsLoop03{
	0%{
		transform: translate3d(0%, 0, 0);
		}
	to{
		transform: translate3d(-300%, 0, 0);
		}
	}

/* 画像スライダー */
.slider{
	display: grid;
	grid-row-gap:var(--def_margin-n05);
	width: 100%;
	}
.slider .slideImg{
	overflow-y: hidden;
	border-radius: var(--def_radius-n03);
	}
.slider .slideImg:before{
	content: "";
	display: block;
	padding-top: 66.667%;
	}
.slider .slideImg li{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 2s;
	}	
.slider .slideImg li.selected{
	opacity: 1;
	transition: opacity 1.6s;
	}	
.slider .slidePager{
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 10px;
	justify-content: center;
	}
.slider .slidePager li{
	background-color: var(--def_color-bg);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transition: background-color 0.4s;
	cursor:pointer;
	}
.slider .slidePager li.selected{
	background-color: var(--def_color-ci);
	}
.pcHidden{
	display: none;
	}
.spHidden{
	display: initial;
	}

/* Header */
.logo a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	}
.logo a:hover{
	opacity: 1;
	}
header, #areaNavigation, .menuOther{
	position: fixed;
	top:0px;
	z-index: 97;
	justify-items: center;
	justify-content: center;
	}
header{
	left: 0px;
	opacity: 0;
	transition: opacity 0.8s;
	}
header.show{
	opacity:1;
	}
header .logo{
	width:var(--def_width-logo);
	margin-top:var(--def_margin-w01);
	margin-left:var(--def_margin-w02);
	transition: height 0.2s;
	overflow: hidden;
	transition:width 0.2s, height 0.2s, padding-top 0.1s;
	background-image: url(common/img/logo.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	z-index: 98;
	}
#page-home header .logo{
	width:var(--def_width-logo-home);
	}
header .logo:before{
	content: "";
	display: block;
	padding-top:61.5%;
	transition:padding-top 0.05s;
	}
header.narrow .logo,#page-home header.narrow .logo{
	width: var(--def_width-logo-narrow);
	}
header.narrow .logo:before{
	padding-top:50%;
	}
#blockScroll, #blockPagetop{
	position:absolute;
	display: grid;
	align-content: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	right:var(--def_margin-w03);
	top: -65px;
	}
#blockScroll:hover, #blockPagetop:hover{
	opacity:1;
	}
#blockScroll .arrow, #blockPagetop .arrow{
	width: 15px;
	height: 30px;
	overflow: hidden;
	}
#blockScroll .arrow img, #blockPagetop .arrow img{
	position: absolute;
  animation: kfblockScrollArrow 2s linear infinite;
	}
@keyframes kfblockScrollArrow{
	0%{
	  transform: translateY(0);
	  opacity:1;
		}
	10%{
	  transform: translateY(100%);
		opacity:1;
		}
	11%{
	  transform: translateY(100%);
	  opacity:0;
		}
	12%{
	  transform: translateY(-100%);
	  opacity:0;
		}
	13%{
	  transform: translateY(-100%);
	  opacity:1;
		}
	23%{
	  transform: translateY(0);
	  opacity:1;
		}
	}

#blockPagetop .arrow{
	transform: rotate(180deg);
	}
#blockScroll:before, #blockPagetop:before{
	position:absolute;
	transform-origin: center center;
	content: "";
	width: 130px;
	height: 130px;
	background-size: 130px 130px;
  animation: kfblockScroll 6s linear infinite;
	}
@keyframes kfblockScroll{
	0%{
	  transform: rotate(0deg);
	}
	100%{
	  transform: rotate(360deg);
	}
	}
#blockScroll:before{
	background-image: url(common/img/btn_scroll.png);
	}
#blockPagetop:before{
	background-image: url(common/img/btn_pagetop.png);
	}
#areaNavigation{
	top: var(--def_margin-basic);
	right: var(--def_margin-basic);
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: var(--def_margin-n03);
	align-content: center;
	transition: opacity 0.8s;
	}
.menuContent{
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: var(--def_margin-basic);
	background-color: var(--def_color-bg-menu);
	border-radius: calc(55px * 0.5);
	align-content: center;
	padding: 0 35px;
	height: 55px;
	}
.menuContent a{
	font-weight: 500;
	font-size: 0.9375em;
	padding:0;
	display: grid;
	align-content: center;
	height: 55px;
	white-space: nowrap;
	}
.menuContent a:before{
	content: "";
	display: block;
	width:0%;
	height:3px;
	position: absolute;
	bottom:0;
	transition: width 0.25s;
	background-color: var(--def_color-ci);
	}
.menuContent a:hover{
	color: var(--def_color-ci);
	opacity:1;
	}
.menuContent a:hover:before{
	width:100%;
	}
#page-home .menuContent a.home,
#page-company .menuContent a.company,
#page-products .menuContent a.products,
#page-voice .menuContent a.voice,
#page-sdgs .menuContent a.sdgs,
#page-recruit .menuContent a.recruit{
	color: var(--def_color-ci);
	}
#page-home .menuContent a.home:before,
#page-company .menuContent a.company:before,
#page-products .menuContent a.products:before,
#page-voice .menuContent a.voice:before,
#page-sdgs .menuContent a.sdgs:before,
#page-recruit .menuContent a.recruit:before{
	width:100%;
	}
#areaNavigation a.contact{
	font-size: 0.9375em;
	width:180px;
	color: var(--def_color-white);
	background-color: var(--def_color-contact);
	border-radius: 27.5px;
	height: 55px;
	line-height: 55px;
	padding:0px 1.5em;
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	}
#areaNavigation a.contact:before{
	content: "";
	display: block;
	width:17px;
	height: 12px;
	background-image: url(common/img/btn_contact.svg);
	margin-right: 0.5em;
	}
#page-company .menuContent .company,
#page-products .menuContent .products,
#page-voice .menuContent .voice,
#page-sdgs .menuContent .sdgs,
#page-contact .menuContent .contact{
	color: var(--def_color-white);
	}
.submenu{
	position: absolute;
	left: 0;
	display: none;
	}
.menuOther{
	grid-column: 2;
	grid-row: 2;
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: 15px;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	width:60px;
	transition: margin-top 0.2s;
	position: fixed;
	top:50%;
	right:0;
	transform: translateY(-50%);
	mix-blend-mode: exclusion;	
	}
.menuOther li{
	width:20px;
	display: grid;
	justify-items: center;
	}
.menuOther h4{
	color: #b9c3c8;
	font-size:0.6875em;
	font-weight: 700;
	border-left: 1px solid #b9c3c8;
	width:18px;
	display: block;
	margin-bottom: 10px;
	}
.menuOther a{
	display: block;
	}
.menuOther a img{
	height:auto;
	}
.menuOther .instagram img{
	width:18px;
	}
main{
	padding-top: calc(var(--def_margin-w06) * 1.4);
	}
#page-home main{
	padding-top: calc(var(--def_margin-w06) * 1.5);
	}
section{
	display: grid;
	margin-bottom: var(--def_margin-w06);
	width: 100%;
	}
section:last-child{
	margin-bottom: 0px;
	}
#btnMenu{
	display:none;
	}
@keyframes kf-header-btnTel{
	0%{
		transform: scaleX(1);
		}
	12%{
		transform: scaleX(-1);
		}		
	25%{
		transform: scaleX(1);
		}
	100%{
		transform: scale(1);
		}
	}
.blockContent{
	position: relative;
	display: grid;
	grid-template-columns: var(--def_margin-window03) var(--def_margin-window01)  1fr var(--def_margin-window01)  var(--def_margin-window03);
	}
#page-home .blockContent{
	grid-row-gap: var(--def_margin-w03);
	}
.elmTitleEn{
	position: absolute;
	display: block;
	z-index: 50;
	}
.elmTitleEn.verticalL{
	transform: rotate(90deg) translateY(-100%);
	transform-origin: left top;
	}
.elmTitleEn.verticalR{
	transform: rotate(90deg) translateX(100%);
	transform-origin: right top;
	}
.elmTitleEn h2{
	letter-spacing: 0.01em;
	font-size: 5em;
	line-height: 1em;
	color: var(--def_color-ci);
	font-weight: 600;
	}
span.br:before{
	content: "\A" ;
	white-space: pre ;
	}
.elmTitleJp h2{
	font-size: 1.2em;
	color: var(--def_color-ci);
	padding-left: 17px;
	padding-top:15px;
	margin-bottom: var(--def_margin-n03);
	}
.elmTitleJp h2:before{
	content:url(common/img/mark_title.svg);
	display: block;
	width: 60px;
	position: absolute;
	top:0;
	left: 0;
	}
.elmTitleJp .txtCopy{
	font-size: 1.875em;
	}
.elmTitleJp .txtCopy.marginBottomNarrow{
	margin-bottom: -0.85em;
	}
.elmContainer{
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: var(--def_margin-w04);
	grid-column: 3;
	}
#page-home .elmContainer{
	grid-auto-flow: column;
	grid-column-gap: var(--def_margin-w04);
	}
.justifyCenter{
	display: grid;
	justify-content: center;
	justify-items: center;
	}
.justifyLeft{
	display: grid;
	justify-content: flex-start;
	justify-items: flex-start;
	}
.alignCenter{
	display: grid;
	align-content: center;
	align-items: center;
	}
.elmContainer.wideCenter{
	grid-column: 2 / 5;
	}
.elmContainer.wideLeft{
	grid-column: 1 / 4;
	}
.twoColumn{
	display: grid;
	grid-template-columns: 240px 1fr;
	}
#areaContent .elmContainer.wideLeft > *{
	padding-left:var(--def_margin-window04);
	}
#areaContent .elmContainer.wideLeft > *.noPadding{
	padding-left:0;
	}
#areaContent .elmContainer.wideRight > *{
	padding-right:var(--def_margin-window03);
	}
#areaContent .elmContainer.wideRight > *.noPadding{
	padding-right:0;
	}
.elmContainer.wideRight{
	grid-column: 3 / 6;
	}
.elmContainer.wideMax{
	grid-column: 1 / 6;
	}
.elmContainer.whiteBase{
	background-color: var(--def_color-white);
	padding:var(--def_margin-window03);
	padding-left: 0;
	}
.elmContainer.wideLeft.whiteBase{
	border-radius: 0px var(--def_radius-w02)  var(--def_radius-w02) 0px;
	}
.blockContent:last-child{
	margin-bottom: 0 !important; 
	}
.text{
	display: grid;
	grid-auto-flow: row;
	grid-row-gap: var(--def_margin-n04);
	}
.fixedHeight{
	padding-top:66.667%;
	overflow: hidden;
	position: relative;
	}
.fixedHeight img{
	width:100%;
	height:auto;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}
.elmPart{
	display: grid;
	grid-row-gap: var(--def_margin-w02);
	}
.autoFlowColumn{
	display: grid;
	grid-auto-flow: column;
	justify-content: flex-start;
	grid-column-gap: var(--def_margin-w02);
	}
.columnHalf{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--def_margin-w03);
	grid-row-gap: var(--def_margin-w04);
	}
.columnOneThird{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: var(--def_margin-basic);
	grid-row-gap: var(--def_margin-w03);
	}
.elmPart h3{
	}
.elmPart img, .photo{
	border-radius: var(--def_radius-n03);
	}
.elmPart img.shape{
	border-radius:0;
	}
.elmPart img.imgCircle{
  border-radius: 50%;
	}
.elmContainer.whiteBase .elmTitleBlock{
	margin-left: 0;
	}
.elmTitleBlock .titleEn{
	color: var(--def_color-ci);
	font-size: 2.25em;
	letter-spacing: 0.01em;
	font-weight: 600;
	margin-bottom: var(--def_margin-n01);
	}
.elmTitleBlock .titleJp{
	font-size: 0.8125em;
	}

/* Illust */
.illustCharacter{
  position:absolute;
	}
.illustCharacter.left{
  left:0;
	}
.illustCharacter.right{
  right:0;
	}
.elmLine{
  width:100%;
	}
.illustCharacter.left .elmLine path{
	transform:translateX(-5px);
	}
.illustCharacter.right .elmLine path{
	transform:translateX(5px);
	}
.elmLine path{
	width: 100%;
	stroke-linecap: round;
  stroke-dasharray: 3000px;
  stroke: #f8f5f3;
  stroke-width: 5.5px;
  fill: transparent;
	}
.elmBird{
	position: absolute;
	width: 55px;
	height: 55px;
	}
@keyframes kfAniBird01{
	0%{
	  transform:translateY(-4px);
		}
	100%{
	  transform:translateY(4px);
		}
	}
.illustCharacter.left .elmBird{
  right:-70px;
  right:calc(-55px - 1%);

	}
.illustCharacter.right .elmBird{
  left:-70px;
	left:calc(-55px - 1%);
	}
.elmBird .bird{
	width:55px;
	}
.elmBird .chirp{
	position: absolute;
	top: -20px;
  animation: kfAniChirp02 2s ease-in infinite;
	}
.illustCharacter.left .elmBird .chirp{
	right: -10px;
	}
.illustCharacter.right .elmBird .chirp{
	left: -10px;
	}
.elmBird .chirp img{
	width:12px;
  animation: kfAniChirp01 0.75s ease-in-out infinite;
  animation-direction: alternate;
	}
@keyframes kfAniChirp01{
	0%{
	  transform:translateX(-10px);
		}
	100%{
	  transform:translateX(10px);
		}
	}
@keyframes kfAniChirp02{
	0%{
	  transform:translateY(0px) rotate(15deg) scale(0.8);
	  opacity: 0;
		}
	10%{
	  opacity: 1;
		}
	70%{
	  opacity: 1;
		}
	80%{
	  transform:translateY(-60px) rotate(-15deg) scale(1.1);
	  opacity: 0;
		}
	100%{
	  transform:translateY(0px);
	  opacity: 0;
		}
	}
#areaContentTitle{
	margin-bottom: var(--def_margin-w05);
	}
#areaContentTitle .elmTitleJp{
	grid-template-rows: auto auto;
	}
#areaContentTitle .elmTitleJp{
	grid-column: 2 / 4;
	grid-row: 1;
	}
#areaContentTitle .elmTitleEn{
	grid-column: 2 / 4;
	grid-row: 2;
	grid-column-gap: var(--def_margin-w02);
	position: unset;
	align-items: flex-end;
	}
#areaContentTitle .elmTitleEn h2{
	line-height: 1em;
	}
#areaContentTitle select{
	text-align: center;
	text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: none;
	font-weight: 500;
	background-color: var(--def_color-white);
	border:1px solid var(--def_color-ci);
	color: var(--def_color-ci);
	border-radius: 30px;
	width:240px;
	height: 60px;select
	line-height: 60px;
	padding:0px 1.5em;
	box-sizing: border-box;
	white-space: nowrap;
	background-image: url(common/img/mark_btn.svg);
	background-size: 6px auto;
	background-position: right 22.5px center;
	}
#areaContentTitle select option[selected][disabled]{
	display: none;
	}
#areaContentTitle .illustCharacter{
	width:75%;
	top:0px;
	}
#areaContentTitle .illustCharacter.left .elmBird{
  right:-50px;
  right:calc(-40px - 1%);
	}
.title1#areaContentTitle .elmBird{
	top:-15%;
	}
.title1#areaContentTitle .bird{
	transform: rotate(-50deg);
	}
.title2#areaContentTitle .elmBird{
	top:45%;
	}
.title2#areaContentTitle .bird{
	transform: rotate(45deg);
	}
.title3#areaContentTitle .elmBird{
	top:-5%;
	}
.title3#areaContentTitle .bird{
	transform: rotate(-45deg);
	}
.title4#areaContentTitle .elmBird{
	top:15%;
	}
.title4#areaContentTitle .bird{
	transform: rotate(45deg);
	}
.title5#areaContentTitle .elmBird{
	top:-27.5%;
	}
.title5#areaContentTitle .bird{
	transform: rotate(-45deg);
	}
.title6#areaContentTitle .elmBird{
	top:15%;
	}
.title6#areaContentTitle .bird{
	transform: rotate(15deg);
	}
#areaContent{
	grid-row-gap: var(--def_margin-w06);
	}
#areaContent .txtCopy{
	font-size: 1.75em;
	}

/* HOME */
#page-home section#areaHomeCatchcopy,
#page-home section#areaHomeKv{
	display: grid;
	grid-template-columns: var(--def_margin-window02) 50% 1fr var(--def_margin-window03) var(--def_margin-window03);
	grid-template-rows: auto auto auto;
	position: relative;
	grid-column: 1 / 3;
	align-items: center;
	margin-bottom: 0;
	}
#page-home section#areaHomeCatchcopy{
	position: fixed;
	transition: opacity 0.8s;
	opacity:0;
	}
#page-home section.show#areaHomeCatchcopy{
	opacity:1;
	}
#areaHomeCatchcopy #blockCopyright{
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	font-size: 0.55em;
	font-weight: 500;
	}
#areaHomeCatchcopy #blockCopyright .txtEn{
	letter-spacing: 0.075em;
	}
#areaHomeCatchcopy .blockCatchcopy,
#areaHomeKv .blockCatchcopy{
	grid-column: 1 / 6;
	grid-row: 1;
	opacity: 0;
	transition: opacity 0.6s;
	padding-bottom: calc(var(--def_margin-w06) * 1.25);
	max-width: 1360px;
	}
#areaHomeCatchcopy .show.blockCatchcopy{
	opacity: 1;
	}
#areaHomeCatchcopy .blockCatchcopy h2,
#areaHomeKv .blockCatchcopy h2{
	width:50%;
	padding-left:15%;
	opacity: 0;
	transition: opacity 1s, filter 0.5s;
	transition-delay: 0.25s;
	}
#areaHomeCatchcopy .show.blockCatchcopy h2{
	opacity: 1;
	}
#areaHomeCatchcopy .illustCharacter{
	position: absolute;
	width:80%;
	top: -5%;
	}
#areaHomeCatchcopy .elmLine path{
	width: 100%;
	stroke-linecap: round;
  stroke-dasharray: 3000px;
  stroke: #f8f5f3;
  stroke-width: 6px;
  fill: transparent;
 	opacity:0;
	}
#areaHomeCatchcopy .illustCharacter.show .elmLine path{
	opacity:1;
  animation: kfillustCharacter 1s linear 1;
	}
@keyframes kfillustCharacter{
	0%{
	  stroke-dashoffset: 3000px;
	  opacity:0;
		}
	1%{
	  opacity:1;
		}
	100%{
	  stroke-dashoffset: 6000px;
		}
	}
#areaHomeCatchcopy .elmBird{
  opacity:0;
  transition: opacity 1s;
  transition-delay: 1.5s;
 	top:18%;
 	right:calc(-40px - 1%);
	}
#areaHomeCatchcopy .show .elmBird{
  opacity:1;
	}
#areaHomeCatchcopy .elmBird .bird{
	transform: rotate(-40deg);
	}
#areaHomeKv:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--def_color-white);
	grid-column: 1 / 4;
	grid-row: 2 / 4;
	transform: translateY(80px);
	}
#areaHomeKv #blockMovie{
	grid-column: 2 / 6;
	grid-row: 2 / 4;
	}
#areaHomeKv #blockMovie .elmPart{
	display: block;
	overflow: hidden;
	padding-top:54%;
	border-radius: var(--def_radius-w02) 0px 0px var(--def_radius-w02); 
	z-index: 0;
	}
#areaHomeKv #blockMovie .elmPart:after{
	content: "";
	display: block;
	position: absolute;
	top:0px;
	right:0px;
	width: 100%;
	height: 100%;
	background-color: var(--def_color-bg);
	transform-origin: top right;
	transition: opacity 1.2s, transform 0.8s, right 0.2s;
	}
.show#areaHomeKv #blockMovie .elmPart:after{
	transform: scaleX(0);
	right: -1px;
	}
#areaHomeKv #blockMovie .elmPart .objImage{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	animation: kf-kv-fadeOut 36s ease-in-out infinite;
	transform-origin: top left;
	clip-path: inset(0% 100% 0% 0%);
	}
@keyframes kf-kv-fadeOut{
	0%{
		clip-path: inset(0% 100% 0% 0%);
		}	
	3%{
		clip-path: inset(0% 0% 0% 0%);
		}
	98%{
		clip-path: inset(0% 0% 0% 0%);
		}
	100%{
		clip-path: inset(0% 100% 0% 0%);		
		}
	}
#areaHomeKv #blockMovie .elmPart .objImage{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	animation: kf-kv-fadeOut 36s ease-in-out infinite;
	transform-origin: top left;
	}
#areaHomeKv #blockMovie .elmPart .objImage img{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: auto;
	opacity:0;
	transform-origin: center center;
	animation: kf-kv-zoomOut 36s linear infinite;
	}
@keyframes kf-kv-zoomOut{
	0%{
		opacity:0;
		filter: brightness(200%);
		transform: scale(1.15,1.15);
		}	
	3%{
		opacity:1;
		filter: brightness(100%);
		}
	26%{
		opacity:1;
		filter: brightness(100%);
		}
	30%{
		opacity:0;
		filter: brightness(200%);
		}
	31%{
		transform: scale(1,1);
		}
	100%{
		opacity:0;
		transform: scale(1.15,1.15);
		}
	}
#areaHomeKv #blockMovie .elmPart .objImage.sec02,
#areaHomeKv #blockMovie .elmPart .objImage.sec02 img{
	animation-delay: 9s;
	}
#areaHomeKv #blockMovie .elmPart .objImage.sec03,
#areaHomeKv #blockMovie .elmPart .objImage.sec03 img{
	animation-delay: 18s;
	}
#areaHomeKv #blockMovie .elmPart .objImage.sec04,
#areaHomeKv #blockMovie .elmPart .objImage.sec04 img{
	animation-delay: 27s;
	}
#areaHomeKv #blockNews{
	display: grid;
	align-content: center;
	grid-column: 3 / 6;
	grid-row: 3;
	background-color: var(--def_color-white);
	transform: translateY(1px);
	border-radius: 30px 0 0 0;
	font-size: 0.9375em;
	height:60px;
	}
#areaHomeKv #blockNews .date{
	font-weight: 600;
	font-size: 0.8em;
	color: var(--def_color-ci);
	}
#areaHomeKv #blockNews p a{
	color: var(--def_color-txt);
	text-decoration: none;
	}
#areaHomeKv #blockNews p a:hover{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	opacity: 1;
	}
#areaHomePhilosophy{
	grid-template-rows: var(--def_margin-w05) var(--def_margin-basic) 1fr var(--def_margin-w06);
	grid-template-columns: 1fr var(--def_margin-window03)  var(--def_margin-window03);
	}
#areaHomePhilosophy:before{
	content: "";
	display: block;
	background-color: var(--def_color-white);
	height: 100%;
	border-radius: 0 0 var(--def_radius-w02) 0;
	grid-column: 1;
	grid-row: 1 / 5;
	}
#areaHomePhilosophy.fade{
	opacity:1;
	transition:transform 1s, opacity 1s;
	transform: translateY(0);
	visibility: visible;
	}
#areaHomePhilosophy .blockContent{
	grid-column: 1;
	grid-row: 3;
	}
#areaHomePhilosophy p{
	font-size: 1.16em;
	line-height: 4em;
	letter-spacing: 0.3em;
	transition: opacity 1s;
	opacity:0;
	}
#areaHomePhilosophy.show p{
	opacity:1;
	}
#areaHomePhilosophy .illustCharacter{
  width:43.85%;
	grid-row: 2 / 5;
	}
#areaHomePhilosophy .elmBird{
	bottom:-4%;
	}
#areaHomePhilosophy .elmBird .bird{
	transform: rotate(-20deg);
	}
#areaHomePhilosophy .photo{
	position:absolute;
	border-radius: var(--def_radius-n03);
	}
#areaHomePhilosophy .photo#phPhilosophy01{
	width:46.5%;
	top:0;
	left:37%;
	}
#areaHomePhilosophy .photo#phPhilosophy02-01{
	width:56%;
	bottom:0%;
	left:12%;
	}
#areaHomePhilosophy .photo#phPhilosophy02-02{
	width:56%;
	bottom:0%;
	left:12%;
	}
#areaHomeCompany .elmTitleEn{
	top:-40px;
	left:var(--def_margin-w03);
	}
#areaHomeCompany .elmContainer{
	grid-template-columns: 43% 1fr;
	}
#areaHomeCompany .elmPart img{
	border-radius: 0 var(--def_radius-basic) var(--def_radius-basic) 0;
	}
#areaHomeCompany .illustCharacter{
	width:67.7%;
	bottom:calc(-1 * var(--def_margin-w05));
	}
#areaHomeCompany .elmBird{
	bottom: 7.5%;
	}
#areaHomeCompany .elmBird .bird{
	transform: rotate(-30deg);
	}
#areaHomeProducts .elmTitleEn{
	top:-60px;
	right:var(--def_margin-basic);
	}
#areaHomeVoice .elmContainer.photo{
	grid-column-gap: var(--def_margin-w04);
	}
#areaHomeVoice .illustCharacter{
  width:50%;
  margin-top: -80px;
	}
#areaHomeVoice .elmBird{
	bottom: -60%;
	}
#areaHomeVoice .elmBird .bird{
	transform: rotate(-30deg);
	}
#areaHomeVoice .elmTitleEn{
  position: static;
	}
#areaHomeVoice h4{
  font-size: 1.075em;
  padding: 0 var(--def_margin-n05);
	}
#areaHomeVoice .elmPart{
  grid-row-gap: var(--def_margin-n04);
	}
#areaHomeOther .blockContent{
	grid-auto-flow: column;
	}
#areaHomeOther .illustCharacter{
	width:52.3%;
	top:calc(-1 * var(--def_margin-w05));
	}
#areaHomeOther .elmBird{
	bottom: 35%;
	}
#areaHomeOther .elmBird .bird{
	transform: rotate(-30deg);
	}
#areaHomeSdgs .elmTitleEn,#areaHomeRecruit .elmTitleEn{
	top:calc(-1 * var(--def_margin-w04));
	}
#areaHomeSdgs .elmTitleEn{
	left:var(--def_margin-basic);
	}
#areaHomeRecruit{
	margin-top:var(--def_margin-w05);
	}
#areaHomeRecruit .elmTitleEn{
	right:var(--def_margin-n03);
	}
/* Company */
#companyPhilosophy{
	padding-bottom:calc(1.5 * var(--def_margin-w04));
	}
#companyPhilosophy .autoFlowColumn{
	grid-template-columns: auto 50%;
	grid-column-gap: calc(2 * var(--def_margin-w04));
	}
#companyPhilosophy .elmTitleBlock{
	margin-bottom: var(--def_margin-n04);
	}
#companyPhilosophy .text{
	grid-row-gap: var(--def_margin-basic);
	}
#companyPhilosophy .photo img.main{
	border-radius: var(--def_radius-w02) 0 0 var(--def_radius-w02);
	}
#companyPhilosophy .photo img.thumbnail{
	width: 50%;
	position: absolute;
	left: calc(-1 * var(--def_margin-w04));
	top:70%;
	}
#companyMessage .txtCopy{
	font-size: 1.5625em;
	}
#companyMessage .autoFlowColumn{
	grid-template-columns: 240px 1fr;
	grid-column-gap: var(--def_margin-w04);
	}
#companyMessage .photo{
	text-align: center;
	}
#companyMessage .photo .thumbnail{
	border-radius: 50%;
	}
#companyMessage .photo .txtFukidashi{
	font-size: 0.9375em;
	margin-bottom: var(--def_margin-n04);
	}
#companyMessage .photo .name{
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	justify-items: center;
	font-size: 0.8125em;
	margin-top: var(--def_margin-n03);
	grid-column-gap: var(--def_margin-n02);
	}
#companyMessage .photo .name img{
	width:145px;
	}

/* Products */
#productsOurProducts .photo.main{
	height:320px;
	background-image: url(common/img/ph_products_01-01.jpg);
	background-size: auto 320px;
	background-repeat: repeat-x;
	border-radius: 0 var(--def_radius-n03) var(--def_radius-n03) 0;
	animation:kf-productsMain 48s linear 0s infinite;
	}
@keyframes kf-productsMain{
	0%{ 
		background-position-x: 0px;
		}
	100%{
		background-position-x: -1920px;
		}
	}
#productsOurProducts .photo.thumbnail{
	width:300px;
	height:auto;
	}
#productsOurProducts .autoFlowColumn{
	grid-column-gap: var(--def_margin-w03);
	}
#productsType .linkBtn, #productsType .linkBtn:hover{
	background-color: var(--def_color-ci);
	text-align: center;
	color: var(--def_color-white);
	}
#productsType .linkBtn:before, #productsType .linkBtn:hover:before{
	background-color:  var(--def_color-white);
	transform: translateY(-50%) scale(1.0);
	right: 17.5px;
	}
#productsType .illust{
	padding-right: var(--def_margin-window03);
	}
#productsType .illust .linkBtn{
	position: absolute;
	width:auto;
	height: 45px;
	border-radius: 22.5px;
	font-size: 0.9em;
	padding:0 2.5em;
	}
#productsType .illust .linkBtn:hover{
	opacity: 0.7;
	}
#productsType .illust .linkBtn#product01{
	left: 20%;	
	top: 2.5%;
	}
#productsType .illust .linkBtn#product02{
	left: 0%;
	top: 40%;
	}
#productsType .illust .linkBtn#product03{
	left: 50%;
	top: 22.5%;
	}
#productsType .illust .linkBtn#product04{
	right: 10%;	
	top: 55%;
	}
#productsType .illust .linkBtn#product05{
	left: 37.5%;
	top: 5%;
	}
#productsType .illust .linkBtn#product06{
	left: 55%;
	top: 77.5%;
	}
#productsType .illustCharacter{
	width: 77%;
	top:-2.5%;
	}
#productsType .elmBird{
	bottom:-0.5%;
	}
#productsType .elmBird .bird{
	transform: rotate(0deg);
	}
#productsType li{
	display: grid;
	background-color: var(--def_color-white);
	border-radius: var(--def_radius-n03);
	overflow: hidden;
	grid-row-gap: var(--def_margin-n04);
	padding-bottom: calc(var(--def_margin-n04) + 60px);
	}
#productsType li .number{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	font-size: 1.375em;
	line-height: 50px;
	font-weight: 500;
	padding-left: 0.75em;
	padding-right: 40px;
	background-image: url(common/img/mark_title_products.svg);
	background-repeat: no-repeat;
	background-position-x: right;
	background-size: 100px 50px;
	}
#productsType li .title{
	text-align: center;
	}
#productsType li .title h4{
	color: var(--def_color-ci);
	font-size: 1.5625em;
	}
#productsType li .title h5{
	margin-bottom: var(--def_margin-n01);
	}
#productsType .photo img{
	border-radius: 0;
	}
#productsFaq ul{
	display: grid;
	grid-row-gap: var(--def_margin-basic);
	}
#productsFaq li{
	background-color: var(--def_color-white);
	padding:var(--def_margin-w01);
	padding-right:var(--def_margin-window03);
	border-radius: var(--def_radius-n03) 0 0 var(--def_radius-n03);
	}
#productsType li .linkBtn{
	width: 100%;
	height: 60px;
	border-radius: 0;
	border: 0;
	position: absolute;
	bottom:0;
	left: 0;
	}
#productsType li .linkBtn:before{
	right: 22.5px;
	}
#productsFaq h4, #productsFaq p{
	padding-left: calc(30px + var(--def_margin-n04));
	}
#productsFaq h4{
	font-size: 1.5em;
	margin-bottom: var(--def_margin-n04);
	}
#productsFaq h4:before, #productsFaq p:before{
	display:grid;
	align-content: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top:0;
	font-size: 16px;
	font-weight: 500;
	border-radius: 50%;
	width:30px;
	height: 30px;
	line-height: 30px;
	border: 1px solid var(--def_color-ci);
	text-align: center;
	letter-spacing: 0;
	}
#productsFaq h4:before{
	content: "Q";
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	}
#productsFaq p:before{
	content: "A";
	color: var(--def_color-ci);
	top:0.25em;
	}
#productsDetailOutline .text{
	grid-row-gap: var(--def_margin-w02);
	}
#productsDetailOutline .title h4{
	font-size: 1.25em;
	margin-bottom: 0.5em;
	}
#productsDetailOutline .title h3{
	font-size: 2.5em;
	color: var(--def_color-ci);
	}
#productsDetailOutline .title .points{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: var(--def_margin-n01);
	}
#productsDetailOutline .title .points span{
	display: grid;
	align-content: center;
	background-color: var(--def_color-ci);
	color:var(--def_color-white);
	font-size: 0.875em;
	line-height: 1.5em;
	text-align: center;
	padding:1.5em;
	min-width: 120px;
	border-radius: var(--def_radius-n02);
	font-weight: 500;
	}
#productsDetailOutline .movie{
	width: 100%;
	padding-top:56.25%;
	overflow: hidden;
	}
#productsDetailOutline .movie > *{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	}
#productsDetailLineup li{
	display: grid;
	background-color: var(--def_color-white);
	border-radius: var(--def_radius-n03);
	overflow: hidden;
	}
#productsDetailLineup .photo img{
	border-radius: 0;
	}
#productsDetailLineup .point{
	display: grid;
	overflow: hidden;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	justify-content: center;
	align-content: center;
	text-align: center;
	font-size: 0.875em;
	line-height: 1.25em;
	width: 75px;
	height: 75px;
	border-radius: 50%;
	position: absolute;
	top: var(--def_margin-n02);
	left: var(--def_margin-n02);
	}
#productsDetailLineup .text{
	padding: var(--def_margin-basic);
	}
#productsDetailLineup .title{
	grid-column-gap: var(--def_margin-n03);
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	color: var(--def_color-ci);
	}
#productsDetailLineup .title h4{
	font-size: 1.5em;
	color: var(--def_color-ci);
	}
#productsDetailLineup .title h4.txtEn{
	font-size: 2em;
	font-weight: 600;
	}
#productsDetailLineup .title .caption{
	font-size: 0.8em;
	padding:0.5em 1em;
	border:1px solid var(--def_color-ci);
	border-radius: 8px;
	}
#productsDetailLineup h5{
	font-size: 1.25em;
	margin-bottom:var(--def_margin-n02);
	}
#productsDetailLineup p{
	font-size: 0.9375em;
	}
#productsDetailSpec table{
	table-layout: fixed;
	}
#productsDetailSpec td,#productsDetailSpec th,#productsDetailSpec th.itemName{
	border-right: 1px solid var(--def_color-line_pale);
	text-align: center;
	}
#productsDetailSpec tr td:last-child,#productsDetailSpec tr th:last-child{
	border-right: 0;
	}
#productsDetailSpec p{
	text-align: left;
	font-size: 0.8em;
	line-height: 2em;
	}
/* Voice */
#voiceDetail ul{
	display: grid;
	grid-row-gap: var(--def_margin-basic);
	}
#voiceDetail li{
	background-color: var(--def_color-white);
	padding:var(--def_margin-w04);
	padding-right:var(--def_margin-window03);
	border-radius: var(--def_radius-w02) 0 0 var(--def_radius-w02);
	overflow: hidden;
	display: grid;
	grid-row-gap: var(--def_margin-w04);
	}
#voiceDetail li .number{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	font-size: 2.5em;
	line-height: 1em;
	padding: var(--def_margin-n05);
	border-radius: 0 0 var(--def_radius-w01) 0;
	font-weight: 500;
	letter-spacing: 0;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	}
#voiceDetail li .number span{
	font-size: 10px;
	line-height: 10px;
	margin-right: 2px;
	}
#voiceDetail li .title.autoFlowColumn{
	grid-template-columns: 250px 1fr;
	grid-column-gap: var(--def_margin-w03);
	border-bottom: 1px solid var(--def_color-line_pale);
	padding-bottom:var(--def_margin-w04);
	}
#voiceDetail li .title .photo img{
	border-radius: 50%;
	}
#voiceDetail li .title .products{
	color: var(--def_color-ci);
	font-weight: 500;
	margin-bottom: var(--def_margin-n03);

	display: grid;
	grid-auto-flow: column;
	grid-column-gap: var(--def_radius-n03);
	align-content: flex-start;
	align-items: center;
	justify-content: flex-start;
	justify-items: flex-start;

	}
#voiceDetail li .title .products span{
	text-align: center;
	font-size: 0.75em;
	line-height: 1em;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	border-radius: var(--def_radius-n01);
	padding: 0.75em;
	}
#voiceDetail li .title h3{
	font-size: 1.875em;
	}
#voiceDetail li .title .data{
	display: grid;
	grid-row-gap: var(--def_radius-n02);
	}
#voiceDetail li .title .data h5{
	font-size: 1.125em;
	}
#voiceDetail li .title .data p{
	font-size: 0.875em;
	line-height: 2em;
	}
#voiceDetail li .title .data a{
	font-size: 0.8125em;
	font-weight: 500;
	color: var(--def_color-ci);
	}
#voiceDetail li .twoColumn{
	grid-column-gap: var(--def_margin-w02);
	}
#voiceDetail li .twoColumn:nth-child(odd){
	grid-template-columns: 1fr 360px;
	}
#voiceDetail li .twoColumn:nth-child(even){
	grid-template-columns: 360px 1fr;
	}
#voiceDetail li .twoColumn:nth-child(odd) .photo,
#voiceDetail li .twoColumn:nth-child(even) .text{
	grid-column: 2;
	grid-row: 1;
	}
#voiceDetail li .twoColumn:nth-child(even) .photo,
#voiceDetail li .twoColumn:nth-child(odd) .text{
	grid-column: 1;
	grid-row: 1;
	}
#voiceDetail li .twoColumn h4{
	font-size: 1.5em;
	}
#voiceDetail li .twoColumn .text{
	grid-row-gap: var(--def_radius-n03);
	}

/* Sdgs Activity */
#sdgsLead .autoFlowColumn{
	grid-template-columns: 300px 1fr;
	}
#sdgsDetail ul{
	display: grid;
	grid-row-gap: var(--def_margin-w03);
	}
#sdgsDetail li{
	background-color: var(--def_color-white);
	padding: var(--def_margin-w04);
	padding-right:var(--def_margin-window03);
	border-radius: var(--def_radius-n03) 0 0 var(--def_radius-n03);
	display: grid;
	grid-row-gap: var(--def_margin-w04);
	}
#sdgsDetail li .number{
	position: absolute;
	top: calc(-1 * 0.5em);
	left: : var(--def_margin-w04);
	color: var(--def_color-ci);
	font-size: 3.75em;
	line-height: 1em;
	font-weight: 500;
	letter-spacing: 0;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	}
#sdgsDetail li:nth-child(odd) .number{
	left: var(--def_margin-w04);
	}
#sdgsDetail li:nth-child(even) .number{
	right: var(--def_margin-window03);
	}
#sdgsDetail li .number span{
	font-size: 13px;
	line-height: 13px;
	margin-right: 2px;
	color: var(--def_color-txt);
	}
#sdgsDetail li .text{
	grid-row-gap: var(--def_margin-basic);
	}
#sdgsDetail li .twoColumn{
	grid-column-gap: var(--def_margin-w02);
	}
#sdgsDetail li:nth-child(even) .twoColumn{
	grid-template-columns: 1fr 400px;
	}
#sdgsDetail li:nth-child(odd) .twoColumn{
	grid-template-columns: 400px 1fr;
	}
#sdgsDetail li:nth-child(even) .twoColumn .photo,
#sdgsDetail li:nth-child(odd) .twoColumn .text{
	grid-column: 2;
	grid-row: 1;
	}
#sdgsDetail li:nth-child(odd) .twoColumn .photo,
#sdgsDetail li:nth-child(even) .twoColumn .text{
	grid-column: 1;
	grid-row: 1;
	}
#sdgsDetail li .twoColumn h4{
	font-size: 1.5625em;
	}
#sdgsDetail li .twoColumn .text{
	grid-row-gap: var(--def_radius-n03);
	}
#sdgsDetail li .icon{
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: var(--def_margin-n01);
	justify-content: flex-start;
	margin-top: var(--def_margin-n02);
	}
#sdgsDetail li .icon li{
	padding: 0;
	border-radius: 0;
	}
#sdgsDetail li .icon img{
	border-radius: 0;
	width: 70px;
	height: auto;
	}
#contactForm .text{
	grid-row-gap: var(--def_margin-w02);
	}
#contactForm .text .text{
	grid-row-gap: var(--def_margin-n03);
	}
#contactForm .autoFlowColumn{
	justify-content: center;
	grid-column-gap: var(--def_margin-basic);
	}
#contactForm .required{
	color: var(--def_color-white);
	background-color: var(--def_color-line);
	font-size: 0.75em;
	padding: 0.5em;
	border-radius: 4px;
	margin-left: 1em;
	white-space: nowrap;
	}
#contactForm .mw_wp_form_input .inputHidden{
	display: none;
	}
#contactForm .mw_wp_form_confirm .confirmHidden{
	display: none;
	}
#contactForm input.linkBtn{
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	cursor: pointer;
	transition: 0.2s;
	width: 320px;
	letter-spacing: 0.05em;
	grid-column: 2;
	}
#contactForm input.linkBtn:hover{
	opacity: 0.7;
	}
#contactForm input.linkBtn.btnBack{
	background-color: var(--def_color-white);
	border: 1px solid var(--def_color-line);
	color: var(--def_color-txt);
	grid-column: 1;
	}
#contactForm input.linkBtn.btnBack:before{
	background-color: var(--def_color-txt);
	}
/* Rectuit */
#recruitLead .fixedHeight{
	padding-top:40%;
	}
#recruitList ul{
	display: grid;
	grid-row-gap: var(--def_margin-basic);
	}
#recruitList li{
	background-color: var(--def_color-white);
	padding:var(--def_margin-w04);
	border-radius: var(--def_radius-w01) 0 0 var(--def_radius-w01);
	overflow: hidden;
	}
#recruitList li h4{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	font-size: 1.5em;
	line-height: 75px;
	font-weight: 500;
	padding-left: 1.75em;
	}
#recruitList li h4:after{
	content: url(common/img/mark_title_recruit.svg);
	position: absolute;
	width: 100px;
	height: 75px;
	top:0;
	right:-100px;
	}
#recruitList li .autoFlowColumn{
	grid-column-gap: var(--def_margin-basic);
	grid-template-columns: 1fr 180px;
	margin-top: var(--def_margin-basic);
	}
#recruitList li .linkBtn{
	width:180px;
	}
/* Footer */
footer #titleFooter{
	position: relative;
	}
footer #titleFooter:before{
	content: "";
	display: block;
	width: 100%;
	height: 20vw;
	}
footer #titleFooter .illustCharacter{
	width:64.615%;
	bottom:15px;
	}
footer #titleFooter .elmBird{
	left:48%;
	bottom:0px;
	}
footer .elmBird .chirp{
	left: 50px;
	}
footer #areaContact{
	color: var(--def_color-white);
	background-color: var(--def_color-ci);
	padding-top: var(--def_margin-w05);
	padding-bottom: var(--def_margin-w06);
	transform: scale(0.5);
	transition:transform 0.75s, border-radius 0.75s;
	}
footer.show #areaContact{
	border-radius: var(--def_radius-w03);
	border-radius: var(--def_radius-w03) var(--def_radius-w03) 0 0;
	transform: scale(1);
	}
footer #areaContact .blockContent{
	grid-row-gap: var(--def_margin-w03);
	}
footer #areaContact .elmTitleEn{
	position: static;
	}
footer #areaContact .elmTitleEn h2{
	text-align: center;
	color: var(--def_color-white);
	}
footer #areaContact a.contact{
	font-size: 1.25em;
	font-weight: 500;
	color: var(--def_color-ci);
	background-color: var(--def_color-white);
	border-radius: 35px;
	width:360px;
	height: 70px;
	line-height: 70px;
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	}
footer #areaContact a.contact:before{
	content: "";
	display: block;
	width:17px;
	height: 12px;
	background-image: url(common/img/btn_contact_footer.svg);
	margin-right: 0.5em;
	}
footer #areaContact .elmTitleJp h2{
	font-size: 1.125em;
	color: var(--def_color-white);
	margin-bottom: 0;
	}
footer #areaContact .elmTitleJp h2:before{
	content:url(common/img/mark_title_white.svg);
	}
footer #areaContact h4{
	font-size: 1.3125em;
	text-align: center;
	color: var(--def_color-white);
	margin-bottom: var(--def_margin-n04);
	}
footer #areaContact .contactNumber{
	font-size: 2em;
	font-weight: 700;
	grid-column-gap: var(--def_margin-basic);
	text-align:center;
	}
footer #areaContact .contactNumber p{
	line-height: 1em;
	}
footer #areaContact p{
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 10px;
	}
footer #areaContact .contactNumber span{
	font-size: 0.4em;
	line-height: 1em;
	text-align: center;
	background-color: var(--def_color-white);
	color: var(--def_color-ci);
	display: block;
	border-radius: 8px;
	padding:0.5em 1em;
	font-weight: 700;
	}
footer #areaAccess .elmContainer{
	grid-template-columns: 260px 1fr 1fr;
	grid-column-gap: var(--def_margin-w04);
	grid-column: 2 / 5;
	}
footer #areaAccess .map{
	display: block;
	width: 100%;
	padding-top: 75%;
	border-radius: var(--def_radius-n03);
	overflow: hidden;
	}
footer #areaAccess  .map > div{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}
footer #areaAccess h4{
	font-size: 1.4em;
	color: var(--def_color-ci);
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 0.5em;
	margin-bottom: var(--def_margin-n02);
	}
footer #areaAccess h4 span{
	text-align: center;
	font-weight: 200;
	font-size: 0.5em;
	line-height: 1em;
	border-radius: 6px;
	padding: 0.7em 1em;
	background-color: var(--def_color-ci);
	color: var(--def_color-white);
	display: block;
	}
footer #areaAccess p{
	font-weight: 500;
	font-size: 0.8125em;
	text-align: center;
	}
footer #areaInformation{
	background-color: var(--def_color-white);
	}
footer #areaInformation .elmContainer{
	margin-bottom: 0;
	}
footer #areaInformation p{
	text-align: center;
	font-size: 0.6875em;
	padding:50px 0;
	}
footer #illustFooter{
	position: absolute;
	top:-176px;
	left: var(--def_margin-w05);
	width:248px;
	}

/* Loading */
#loading{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items:center;
	justify-items:center;
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	left: 0;
	background-color:var(--def_color-bg);
	z-index:100;
	transition:opacity 1.6s;
	pointer-events: none;
	cursor:unset;
	}
.loaded #loading{
	cursor:auto;
	opacity: 0;
	}
#loading div{
	display:block;
	width:200px;
	transition:opacity 0.2s;
	overflow:hidden;
	}
.loaded #loading div{
	opacity:0;
	}
#loading div p{
	font-size: 0.85em;
	font-weight: var(--def_fontWeight-semibold);
	text-align: center;
	}
#loading div svg line{
	transform:scaleX(0);
	transform-origin:left;
	animation:kf-loading 1.2s ease-in-out 0s infinite;
	image-rendering:pixelated;
	}
@keyframes kf-loading{
	0%{ 
		transform:scaleX(0);
		}
	30%{ 
		transform:scaleX(0);
		transform-origin:left;
		}	
	49.99%{
		transform:scaleX(1);
		transform-origin:left;
		}
	50%{
		transform:scaleX(1);
		transform-origin:right;
		}
	70%{
		transform:scaleX(0);
		transform-origin:right;
		}
	100%{
		transform:scaleX(0);
		}
	}

/* タブレット */
@media screen and (max-width:1280px){
	#productsDetailOutline .title{
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-n04);
		}
	#productsDetailLineup .title{
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-n03);
		text-align: center;
		justify-content: unset;
		}
	}
/* タブレット横限定 */
@media screen and (max-width:1024px) and (min-width:769px){
	/* Header */
	#areaNavigation a.contact{
		width:55px;
		padding:0;
		}
	#areaNavigation a.contact:before{
		margin-right: 0;
		}
	#areaNavigation a.contact span{
		display: none;
		}
	}
/* タブレット横 */
@media screen and (max-width:1024px){
	:root{
		--def_margin-basic:30px;
		--def_width-logo-home:147px;
		--def_width-logo:128px;
		--def_width-logo-narrow:100px;
		}
	/* Tag */
	body{
		font-size:1.5rem;
		}
	.columnOneThird{
		grid-template-columns: 1fr 1fr;
		grid-column-gap: var(--def_margin-w03);
		grid-row-gap: var(--def_margin-w04);
		}
	.twoColumn{
		grid-auto-flow: row !important;
		grid-column-gap: unset !important;
		grid-template-columns: 1fr !important;
		grid-row-gap: var(--def_margin-w04);
		}

	/* Common */
	#areaContentTitle .elmTitleEn{
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-basic);
		}

	/* Home */
	#areaHomeCatchcopy .illustCharacter{
		width:90%;
		}
	#areaHomeVoice .elmContainer.photo{
		grid-template-columns: 1fr 1fr;
		grid-column: 3;
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-w03);
		grid-column-gap: var(--def_margin-w01);
		}
	#areaHomeVoice h4{
	  font-size: 0.9em;
		}
	#areaHomeVoice .elmContainer.justifyCenter{
		justify-content: unset;
		justify-items: unset;
		}
	/* Company */
	#companyPhilosophy .autoFlowColumn{
		grid-template-columns: 1fr;
		grid-auto-flow: unset;
		}
	#companyPhilosophy .photo img.thumbnail{
		left: unset;
		right: var(--def_margin-window01);
		}

	/* Products */
	#productsOurProducts .photo.thumbnail{
		width:100%;
		height:auto;
		}
	#productsDetailOutline .title .points span{
		font-size: 0.75em;
		padding:1em;
		min-width: unset;
		}
	#productsDetailOutline .text{
		grid-template-columns: unset;
		}
	#voiceDetail li .twoColumn:nth-child(odd) .photo,
	#voiceDetail li .twoColumn:nth-child(even) .text,
	#voiceDetail li .twoColumn:nth-child(even) .photo,
	#voiceDetail li .twoColumn:nth-child(odd) .text{
		grid-column: unset;
		grid-row: unset;
		}
	#voiceDetail li .title.autoFlowColumn{
		grid-template-columns: 30% 1fr;
		}
	/* Sdgs Activity */
	#sdgsLead .autoFlowColumn{
		grid-template-columns: 25% 1fr;
		}
	#sdgsDetail li:nth-child(even) .twoColumn .photo,
	#sdgsDetail li:nth-child(odd) .twoColumn .text,
	#sdgsDetail li:nth-child(odd) .twoColumn .photo,
	#sdgsDetail li:nth-child(even) .twoColumn .text{
		grid-column: unset;
		grid-row: unset;
		}
	footer #areaContact a.contact{
		width:300px;
		}
	footer #areaContact .contactNumber p{
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-n03);
		}
	footer #areaAccess .elmContainer{
		grid-template-columns: auto 30% 30%;
		}
	}

/* タブレット縦 */
@media screen and (max-width:768px){
	body{
		font-size:1.4rem;
		}
	/* Header */
	header .logo{
		margin-top:var(--def_margin-basic);
		margin-left:var(--def_margin-w01);
		}
	#btnMenu{
		display: grid;
		grid-row-gap: 1px;
		transition:0.4s;
		opacity:0;
		cursor:pointer;
		align-items: center;
		justify-items: center;
		padding: 24px;
		position: fixed;
		top:0;
		right:0;
		z-index: 500;
		font-size: 0.675em;
		line-height: 1em;
		font-weight: 700;
		color: var(--def_color-ci);
		text-align: center;
		background-color: var(--def_color-bg-menu-st);
		border-radius: 0 0 0 20px;
		}
	#btnMenu .txtOpen, #btnMenu .txtClose{
		transition: opacity 0.4s;
		grid-column: 1;
		grid-row: 2;
		}
	#btnMenu .txtClose{
		opacity:0;
		}		
	#btnMenu .txtOpen{
		opacity:1;
		}
	#btnMenu .txtClose{
		opacity:0;
		transition: opacity 0.4s;
		grid-column: 1;
		grid-row: 2;
		}
	.show #btnMenu{
		opacity:1;
		}
	#btnMenu .mark{
		display:block;
		width:32px;
		height:24px;
		}
	#btnMenu .mark:before,#btnMenu .mark:after{
		content:"";
		display:block;
		background-color:var(--def_color-ci);
		width:30px;
		height:2px;
		position:absolute;
		left:1px;
		transform-origin:center center;
		transition:top ease-out 0.2s,transform linear 0.2s ;
		border-radius: 1px;
		}
	.show #btnMenu .mark:before{
		top:7px;
		}
	.show #btnMenu .mark:after{
		top:15px;
		}
	.menuOpen #btnMenu .mark:before{
		transform:translateY(4px) rotate(135deg) scaleX(0.7);
		}
	.menuOpen #btnMenu .mark:after{
		transform:translateY(-4px) rotate(-135deg) scaleX(0.7);
		}
	.menuOpen #btnMenu .txtOpen{
		opacity:0;
		}
	.menuOpen #btnMenu .txtClose{
		opacity:1;
		}
	#areaNavigation, .show#areaNavigation{
		grid-template-columns: unset;
		}
	#areaNavigation{
		opacity: 0;
		transition: opacity 0.4s;
		width:100%;
		height:100%;
		background-color: var(--def_color-bg-menu);
		top: 0;
		right: 0;
		grid-auto-flow: row;
		grid-row-gap: var(--def_margin-w05);
		justify-content: flex-start;
		justify-items: flex-start;
		pointer-events: none;
		}
	.menuOpen #areaNavigation{
		opacity: 1;
		pointer-events: auto;
		}
	.menuContent{
		grid-column: unset;
		grid-auto-flow: row;
		grid-row-gap: var(--def_margin-w02);
		background-color: unset;
		height: auto;
		padding: 0;
		margin-left: var(--def_margin-w05);
		margin-top: var(--def_margin-w05);
		}
	.menuContent a{
		height:auto;
		font-size: 1.075em;
		}
	.menuContent a:hover{
		color:var(--def_color-txt);
		}
	.menuContent a:hover:before{
		width:0%;
		}
	#page-home .menuContent a.home:before,
	#page-company .menuContent a.company:before,
	#page-products .menuContent a.products:before,
	#page-voice .menuContent a.voice:before,
	#page-sdgs .menuContent a.sdgs:before,
	#page-recruit .menuContent a.recruit:before{
		width:0%;
		}
	#page-home .menuContent a.home,
	#page-company .menuContent a.company,
	#page-products .menuContent a.products,
	#page-voice .menuContent a.voice,
	#page-sdgs .menuContent a.sdgs,
	#page-recruit .menuContent a.recruit{
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 8px;
		}
	#areaNavigation a.contact{
		font-size: 1em;
		width:auto;
		border-radius: 25px;
		height: 50px;
		line-height: 50px;
		padding:0px 1.75em;
		margin-left: var(--def_margin-w05);
		}
	.menuOther{
		opacity:0;
		transition: opacity 0.4s;
		pointer-events: none;
		}
	.menuOpen .menuOther{
		opacity:1;
		pointer-events: auto;
		}
	.elmBird{
		position: absolute;
		width: 45px;
		height: 45px;
		}
	.illustCharacter.left .elmBird{
	  right:calc(-45px - 2.5%);
		}
	.illustCharacter.right .elmBird{
	  left:calc(-45px - 2.5%);
		}
	.elmBird .bird{
		width:45px;
		}
}
/* スマートフォン縦以下 */
@media screen and (max-width:640px){
	:root{

		--def_margin-basic:20px;
		/*--def_margin-basic:5.5vw;*/
		--def_margin-n01:calc(var(--def_margin-basic) * 0.45);
		--def_margin-n02:calc(var(--def_margin-basic) * 0.55);
		--def_margin-n03:calc(var(--def_margin-basic) * 0.65);
		--def_margin-n04:calc(var(--def_margin-basic) * 0.75);
		--def_margin-n05:calc(var(--def_margin-basic) * 0.85);
		--def_margin-w01:calc(var(--def_margin-basic) * 1.25);
		--def_margin-w02:calc(var(--def_margin-basic) * 1.5);
		--def_margin-w03:calc(var(--def_margin-basic) * 1.75);
		--def_margin-w04:calc(var(--def_margin-basic) * 2.25);
		--def_margin-w05:calc(var(--def_margin-basic) * 3.25);
		--def_margin-w06:calc(var(--def_margin-basic) * 4.25);

		--def_width-logo:105px;
		--def_numSwiperSlide:1.5;
		--def_width-logo-home:105px;
		--def_width-logo:105px;
		--def_width-logo-narrow:80px;

		--def_margin-window01:var(--def_margin-n05);
		--def_margin-window02:calc(var(--def_margin-window01) * 2);
		--def_margin-window03:var(--def_margin-window02);
		--def_margin-window04:var(--def_margin-window02);
		}

	/* Tag */
	p{
		line-height:2em;
		}
	a:hover{
		opacity:1;
		}
	main{
		padding-top: calc(var(--def_margin-w06) * 1.75);
		}
	#page-home main{
		padding-top: calc(var(--def_margin-w06) * 2);
		}
	section{
		min-width: 320px;
		}
	th,td{
		padding:1em;
		}
	th{
		font-size: 0.8em;
		text-align: left;
		padding-left: 0;
		}
	input, select, textarea{
		width: calc(100% - 2em);
		}

	/* General */
	a.linkArea:hover{
		opacity:0;
		}
	.swiper-slide .linkBtn{
		padding:0;
		bottom:0;
		width:100%;
		right:0;
		border-radius: 0 0 var(--def_radius-n03) var(--def_radius-n03);
		}
	.swiper-slide .linkBtn:before{
		background-color: var(--def_color-white);
		}
	.swiper-button-prev,.swiper-button-next{
		width: 56px;
		height: 60px;
		}
	.swiper-button-prev img{
			height: 21px;
			transform: rotate(90deg) translateY(4px);
		}
	.swiper-button-next img{
			height: 21px;
			transform: rotate(270deg) translateY(4px);
		}
	.swiper-button-prev{
		border-radius: 0 30px 30px 0;
		}
	.swiper-button-next{
		border-radius: 30px 0 0 30px;
		}
	.pcHidden{
		display: initial;
		}
	.spHidden{
		display: none;
		}
	.linkBtn,#contactForm input.linkBtn{
		width:100%;
		justify-self: center;
		}
	.linkBtn:hover{
		color: var(--def_color-ci);
		opacity:1 !important;
		}
	.linkBtn:hover::before{
		transform: translateY(-50%) !important;
		}
	.scrollBox{
		width: 100%;
		padding-bottom: var(--def_margin-basic);
		overflow-x: auto;
		}
	/* スクロールバー全体を対象にする */
	.scrollBox::-webkit-scrollbar{
    width: 6px; /* スクロールバーの幅 */
    height: 6px; /* スクロールバーの高さ */
		}
	/* スクロールバーの背景部分をカスタマイズ */
	.scrollBox::-webkit-scrollbar-track{
    background: var(--def_color-bg); /* スクロールバーの背景色 */
    border-radius: 3px; /* 角丸にする */
		}
	/* スクロールバーの操作部分をカスタマイズ */
	.scrollBox::-webkit-scrollbar-thumb{
    background: var(--def_color-ci); /* スクロールバーの操作部分の背景色 */
    border-radius: 3px; /* 角丸にする */
		}
	.blockContent{
		grid-template-columns: var(--def_margin-window01) var(--def_margin-window01)  1fr var(--def_margin-window01)  var(--def_margin-window01);
		}
	.elmContainer{
		grid-auto-flow: row !important;
		grid-column-gap: unset;
		grid-row-gap: var(--def_margin-w04);
		}
	.elmTitleEn h2{
		font-size: 3em;
		}
	.elmTitleJp h2{
		font-size: 1.075em;
		margin-bottom: var(--def_margin-n04);
		padding-left: 14px;
		padding-top: 12px;
		}
	.elmTitleJp .txtCopy{
		font-size: 1.45em;
		}
	.elmTitleJp h2:before{
		width: 40px;
		}
	.elmBird{
		position: absolute;
		width: 30px;
		height: 30px;
		}
	.illustCharacter.left .elmBird{
	  right:-40px;
	  right:calc(-30px - 2.5%);
		}
	.illustCharacter.right .elmBird{
	  left:-40px;
	  left:calc(-30px - 2.5%);
		}
	.elmBird .bird{
		width:30px;
		}
	.elmBird .chirp img{
		width:10px;
		}
	.text{
		grid-row-gap: var(--def_margin-w01);
		}
	.autoFlowColumn,.columnHalf,.columnOneThird{
		grid-auto-flow: row !important;
		grid-column-gap: unset !important;
		grid-template-columns: 1fr !important;
		grid-row-gap: var(--def_margin-w04);
		}
	.text.autoFlowColumn{
		grid-row-gap: var(--def_margin-w01);
		}
	.autoFlowColumn > *, .columnHalf > *, .columnOneThird > *, .twoColumn > *{
		grid-column: unset !important;
		grid-row: unset !important;
		}
	.elmLine path{
	  stroke-width: 8px;
		}
	#areaContent .txtCopy{
		font-size: 1.4em;
		}
	#areaContentTitle .elmTitleJp{
		grid-column: 3 / 4;
		}
	#areaContentTitle .elmTitleEn{
		grid-column: 3 / 4;
		grid-row-gap: var(--def_margin-w03);
		}
	#areaContentTitle select{
		width:100%;
		justify-self: center;
		}
	#areaContentTitle .illustCharacter{
		width:80%;
		top:20%;
		}
	#areaContentTitle .illustCharacter.left .elmBird{
	  right:-30px;
	  transform: translateY(-20%);
		}
	/* Home */
	#areaHomeCatchcopy .illustCharacter{
		width:85%;
		}
	#areaHomeCatchcopy .elmLine path{
	  stroke-width: 6px;
		}
	#page-home section#areaHomeCatchcopy,
	#page-home section#areaHomeKv{
		grid-template-columns: var(--def_margin-window02) 20% 1fr var(--def_margin-window03) var(--def_margin-window03);
		}
	#areaHomeCatchcopy .blockCatchcopy,
	#areaHomeKv .blockCatchcopy{
		grid-column: 1 / 6;
		grid-row: 1;
		opacity: 0;
		transition: opacity 0.6s;
		padding-bottom: var(--def_margin-w06);
		}
	#areaHomeCatchcopy .blockCatchcopy h2,
	#areaHomeKv .blockCatchcopy h2{
		width:78.5%;
		padding-left:10%;
		}
	#areaHomeCatchcopy .elmBird{
	 	top:27.5%;
	 	right:-2%;
		}
	#areaHomeCatchcopy .elmBird .bird{
		transform: rotate(-55deg);
		}
	#areaHomeCatchcopy .illustCharacter .elmLine{
		margin-top: -2.5%;
		width: 95%;
	}
	#areaHomeKv #blockMovie .elmPart{
		padding-top:100%;
		}
	#areaHomeKv #blockMovie .elmPart .objImage img{
		height: 100%;
		width: auto;
		}	
	@keyframes kf-kv-zoomOut{
		0%{
			opacity:0;
			filter: brightness(200%);
			transform: translateX(0%);
			}	
		3%{
			opacity:1;
			filter: brightness(100%);
			}
		26%{
			opacity:1;
			filter: brightness(100%);
			}
		30%{
			opacity:0;
			filter: brightness(200%);
			}
		31%{
			transform: translateX(-33%);
			}
		100%{
			opacity:0;
			transform: translateX(0%);
			}
		}
	#areaHomeKv #blockNews{
		border-radius: 25px 0 0 0;
		height:50px;
		}
	#areaHomePhilosophy{
		grid-template-columns: 1fr var(--def_margin-window01)  var(--def_margin-window01);
		grid-template-rows: var(--def_margin-w04) 0 1fr calc(2.25 * var(--def_margin-w06)) var(--def_margin-w06);
		}
	#areaHomePhilosophy .illustCharacter{
		grid-row: 4;
		align-self: flex-end;
		}
	#areaHomePhilosophy p{
		font-size: 1.075em;
		letter-spacing: 0.2em;
		line-height: 2.75em;
		}
	#areaHomePhilosophy .illustCharacter{
	  width:80%;
		}
	#areaHomePhilosophy .illustCharacter .elmLine path{
	  stroke-width: 6px;
		}
	#areaHomePhilosophy .photo#phPhilosophy01{
		width:42.5%;		
		top:25%;
		left:32.5%;
		}
	#areaHomePhilosophy .photo#phPhilosophy02-01,
	#areaHomePhilosophy .photo#phPhilosophy02-02{
		width:42.5%;		
		left:5%;
		bottom:5%;
		}
	#areaHomeCompany .elmContainer{
		grid-template-columns: unset;
		}
	#areaHomeCompany .elmPart.photo{
		overflow: hidden;
		border-radius: 0 var(--def_radius-basic) var(--def_radius-basic) 0;
		}
	#areaHomeCompany .illustCharacter{
		width:80%;
		bottom:calc(-0.8 * var(--def_margin-w05));
		}
	#areaHomeCompany .elmPart.photo:before{
		content: "";
		padding-top: 100%;
		display: block;
		}
	#areaHomeCompany .elmPart.photo img{
		position: absolute;
		}
	#areaHomeCompany .elmPart.text{
		padding-left: calc(var(--def_margin-window01) * 2);
		}
	#areaHomeProducts .elmTitleEn{
		top:0px;
		}
	#areaHomeVoice .illustCharacter{
	  margin-top: -20px;
		}
	#areaHomeOther .illustCharacter{
		width: 65%;
		}
	#areaHomeOther .elmContainer.wideCenter{
		grid-column: 3;
		}
	#areaHomeSdgs .elmTitleEn,#areaHomeRecruit .elmTitleEn{
		top:calc(-1 * var(--def_margin-w03));
		}
	#areaHomeRecruit{
		margin-top:var(--def_margin-w01);
		}
	#areaHomeRecruit .elmTitleEn{
		right: var(--def_margin-w04);
		}
	/* Company */
	#companyPhilosophy .text{
		padding-right: calc(var(--def_margin-window01) * 2);
		}
	#companyMessage .photo{
		margin:0 auto;
		width: 60%;
		}
	#companyMessage .photo .name{
		grid-auto-flow: unset;
		grid-row-gap: var(--def_margin-n02);
		}
	#companyOutline th, #companyOutline td{
		width: 100%;
		display: block;
		padding: 1.5em 0;
		}
	#companyOutline td{
		padding-top:0.5em;
		}
	#companyOutline th{
		border-bottom: 0;
		padding-bottom: 0;
		}

	/* Products */
	#productsOurProducts .photo.thumbnail{
		width:100%;
		}
	#productsType .illust{
		min-width: 640px;
		padding-top: 2.5%;
		}
	#productsType .illust .linkBtn{
		height: 35px;
		border-radius: 17.5px;
		}
	#productsType .illust .linkBtn:before{
		right:12.5px;
		}
	#productsType .illustCharacter{
		width: 87.5%;
		top:17.5%;
		}
	#productsType .elmLine path{
	  transform: translateY(3px);
		}
	#productsType li{
		padding-bottom: calc(var(--def_margin-n04) + 50px);
		}
	#productsType li .linkBtn{
		height: 50px;
		}
	#productsType .illust .linkBtn#product01{
		left: 20%;	
		top: 0%;
		}
	#productsType .illust .linkBtn#product02{
		left: 0%;
		top: 45%;
		}
	#productsType .illust .linkBtn#product03{
		left: 55%;
		top: 22.5%;
		}
	#productsType .illust .linkBtn#product04{
		right: 2.5%;	
		top: 52.5%;
		}
	#productsType .illust .linkBtn#product05{
		left: 40%;
		top: 5%;
		}
	#productsType .illust .linkBtn#product06{
		left: 50%;
		top: 80%;
		}
	#productsFaq li{
		padding:var(--def_margin-window02);
		}
	#productsFaq h4, #productsFaq p{
		padding-left: calc(24px + var(--def_margin-n04));
		}
	#productsFaq h4{
		font-size: 1.175em;
		}
	#productsFaq h4:before, #productsFaq p:before{
		font-size: 13px;
		width:24px;
		height: 24px;
		line-height: 24px;
		top:0.5em;
		}
	#productsDetailOutline .title{
		}
	#productsDetailOutline .title h4{
		font-size: 1.075em;
		}
	#productsDetailOutline .title h3{
		font-size: 1.875em;
		}
	#productsDetailOutline .title .points span{
		padding:0.9em;
		}
	#productsDetailOutline .title .autoFlowColumn{
		grid-row-gap: var(--def_margin-n02);
		}
	#productsDetailLineup .point{
		width: 60px;
		height: 60px;
		}
	#productsDetailSpec table{
		table-layout: auto;
		}
	#productsDetailSpec th{
		text-align: center;
		padding-left: 1em;
		}
	#productsDetailSpec th.itemName{
		text-align: left;
		padding-left: 0;
		min-width:100px;
		}

	/* Voice */
	#voiceDetail li{
		padding: var(--def_margin-window02);
		}
	#voiceDetail li .number{
		font-size: 2.1em;
		padding: var(--def_margin-basic);
		}
	#voiceDetail li .number span{
		font-size: 8px;
		line-height: 8px;
		}
	#voiceDetail li .title h3{
		font-size: 1.5625em;
		}
	#voiceDetail li .twoColumn h4{
		font-size: 1.45em;
		}
	#voiceDetail li .title.autoFlowColumn{
		grid-row-gap: var(--def_margin-w02);
		}
	#voiceDetail li .title .photo{
		width: 60%;
		margin: 0 auto;
		}
	#voiceDetail li .twoColumn{
		grid-row-gap: var(--def_margin-basic);
		}

	/* Sdgs Activity */
	#sdgsLead .photo{
		width: 60%;
		margin: 0 auto;
		}
	#sdgsDetail li{
		padding: var(--def_margin-window02);
		}
	#sdgsDetail li .number{
		font-size: 2.325em;
		}
	#sdgsDetail li:nth-child(odd) .number{
		left: var(--def_margin-window03);
		}
	#sdgsDetail li .number span{
		font-size: 8px;
		line-height: 8px;
		}
	#sdgsDetail li .twoColumn{
		grid-row-gap: var(--def_margin-basic);
		}
	#sdgsDetail li .icon{
		justify-content: center;
		}
	#sdgsDetail li .icon img{
		width: 60px;
		}

	/* Recruit */
	#recruitLead .fixedHeight{
		padding-top:60%;
		}
	#recruitList li{
		padding:var(--def_margin-window02);
		}
	#recruitList li h4{
		font-size: 1.075em;
		line-height: 45px;
		padding-left: 1.75em;
		}
	#recruitList li h4:after{
		width: 60px;
		height: 45px;
		right:-60px;
		}
	#recruitList li .text.autoFlowColumn{
		grid-row-gap: var(--def_margin-basic);
		margin-top: var(--def_margin-w03);
		}
	#recruitList li .linkBtn{
		width:100%;
		}
	/* Contact */
	#contactForm th, #contactForm td{
		width: 100%;
		display: block;
		padding: 2em 0;
		}
	#contactForm td{
		padding-top:1em;
		}
	#contactForm th{
		border-bottom: 0;
		padding-bottom: 0;
		}
	#contactForm input.linkBtn:hover{
		opacity: 1 !important;
		}
	/* Footer */
	footer #titleFooter:before{
		height: 30vw;
		}
	footer #areaContact p{
		grid-auto-flow: row;
		grid-column-gap: unset;
		}
	footer #areaContact h4{
		font-size: 1.25em;
		}
	footer #areaContact .autoFlowColumn{
		grid-row-gap: var(--def_margin-w01);
		}
	footer #areaContact a.contact{
		border-radius: 30px;
		height: 60px;
		width:100%;
		line-height: 60px;
		padding:0;
		}
	footer #areaContact a.contact{
		font-size: 1.075em;
		padding:0;
		}
	footer #areaContact .contactNumber span{
		font-size: 0.6em;
		}
	footer #areaContact .contactNumber.autoFlowColumn{
		grid-row-gap: var(--def_margin-basic);
		justify-content: space-between;
		text-align: center;
		}
	footer #areaAccess{
		margin-bottom: calc(1.75 * var(--def_margin-w06));
		}
	footer #areaAccess .elmContainer{
		grid-template-columns: unset;
		grid-column-gap: unset;
		}
	footer #areaAccess .logo{
		grid-row: 3;
		justify-content: center;
		grid-auto-flow: column;
		grid-template-columns: 30% 1fr;
		grid-column-gap: var(--def_margin-basic);
		align-content: center;
		align-items: center;
		padding: 0 var(--def_margin-window01);
		}
	footer #areaAccess img{
		width:100%;
		}
	footer #areaAccess .map01{
		grid-row: 1;
		}
	footer #areaAccess .map02{
		grid-row: 2;
		}
	footer #illustFooter{
		top:-125px;
		width:180px;
		left: var(--def_margin-w02);
		}
	#blockScroll, #blockPagetop{
		width: 100px;
		height: 100px;
		top: -50px;
		right:var(--def_margin-basic);
		}
	#blockScroll .arrow, #blockPagetop .arrow{
		width: 10px;
		height: 22px;
		}

	#blockScroll:before, #blockPagetop:before{
		width: 100px;
		height: 100px;
		background-size: 100px 100px;
		}
	}