@charset "utf-8";

/* layout =============================================================
		
	1. Header
	2. Sidebar
	3. Main Container
	4. PageTop
	5. Footer
	*. Print CSS
	
======================================================================== */


/*	 Font family / Font size
===================================================== */
	@font-face {
		font-family: "YuGothic-M";
		font-weight: normal;
		 src: local("YuGothic-Medium"),
				local("Yu Gothic Medium"),
				local("YuGothic-Regular");
		}
	@font-face {
		font-family: "YuGothic-M";
		font-weight: bold;
		 src: local("YoGothic-Bold"),
				local("Yu Gothic");
		}
	body {
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
		}

  html {
		font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
		}
	body {
		font-size: 1.5rem;/* 15px */	
		}
@media screen and (max-width: 414px) {
	body {
		font-size: 1.4rem;/* 14px */	
		}
}
	body {
		-webkit-text-size-adjust: none; 
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: none;
		box-sizing: border-box;
		color: #333333;
		word-wrap: break-word;
		-webkit-transform-origin-x: 0;
		-moz-transform-origin-x: 0;
		-o-transform-origin-x: 0;
		transform-origin-x: 0;
		-webkit-text-size-adjust: 100% !important;
		}

	input:placeholder {
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
		}
	input[type="text"]:focus {
		outline: 0;
		}	
		
	img {
		max-width: 100%;
		height: auto;
		width /***/:auto;
		vertical-align: top !important;
		}
	img { -ms-interpolation-mode: bicubic; }
  
	a {
		-webkit-transition: all .3s ease-in-out;
			 -moz-transition: all .3s ease-in-out;
				 -o-transition: all .3s ease-in-out;
				-ms-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
		text-decoration: none;
		}
	a:focus	{
		outline:none;
		}
  a:hover {
    text-decoration: none;
    }


/* =====================================================================

	ページ遷移時にフェードアウト
	
======================================================================== */
	body {
		animation: page-fadeIn 2s ease 0s 1 normal;
		-webkit-animation: page-fadeIn 2s ease 0s 1 normal;
		}
	@keyframes page-fadeIn {	
		0% {opacity: 0}
		100% {opacity: 1}
		}
	@-webkit-keyframes page-fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
		}				




/* =====================================================================

	1. Header
	
======================================================================== */
	.l-header {
		background-color: #017BC6;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
	.c-logo--image {
		width: 247px;
		}
	
	.c-header-menu .pc,
	.c-header-menu .sp {
		display: none;
		}
@media screen and (max-width: 320px) {
	.c-logo--image {
		width: calc(100% / 1.6) !important;
		}
}
@media screen and (max-width: 414px) {
	.c-logo--image {
		width: calc(100% / 1.8);
		}
}
@media screen and (max-width: 768px) {
  .l-header {
		height: 60px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		}
	.c-header-logo {
		margin-left: 1.6rem;
		}
		
	/*ハンバーガーメニュー*/	
  .c-header--right {
		position: absolute;
		top: 0rem;
		right: 0rem;
		}
  .c-hamburger-menu {
		z-index: 999;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    background-color: #017BC6;
    width:  60px;
    height: 60px;
    padding: 16px 15px;
    box-sizing: border-box;
    }
  .c-hamburger-menu--box {
    width: 30px;
    height: 25px;
    display: inline-block;
    position: relative;
		}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 30px;
		height: 25px;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: rgba(255,255,255,1);
		border-radius: 3px;
		}
	.menu-trigger span:nth-of-type(1) { top: 0px; }
	.menu-trigger span:nth-of-type(2) { top: 11px; }
	.menu-trigger span:nth-of-type(3) { bottom: 0px; }
	.is-toggle .menu-trigger span:nth-of-type(1) {
		-webkit-transform: translateY(11px) rotate(-45deg);
		transform: translateY(11px) rotate(-45deg);
		}
	.is-toggle .menu-trigger span:nth-of-type(2) {
		opacity: 0;
		}
	.is-toggle .menu-trigger span:nth-of-type(3) {
		-webkit-transform: translateY(-11px) rotate(45deg);
		transform: translateY(-11px) rotate(45deg);
		}
					
  .c-spmenu {
    position: fixed;
    top: 60px;
    left: 0;
		/*bottom: 0;*/
    width: 100vw;
    max-height: 80vh;
		/*height: calc(100vh - 60px);*/
		background-color: #017BC6;
		box-sizing: border-box;
    z-index: 100;
		display: none;
    overflow: auto;
		border-top: solid 1px rgba(255,255,255,0.44);
		}
		
	.c-uppermenu {
		border-top: solid 1px rgba(51,51,51,0.33);
		border-bottom: solid 1px rgba(255,255,255,0.44);
		box-shadow: 0 1px #146293;
		padding: 0 1.4rem;
		}
	.c-uppermenu-item {
		display: table-cell;
    vertical-align: middle;
		padding: 2.4rem calc(20px / 2);
		}
	.c-uppermenu-item img {
		width: calc(100%/ 1);
		}
	.tb .c-uppermenu-item {
		padding: 3.2rem calc(50px / 2);
		}
		
  .c-menu-list {
		overflow: hidden;
		}
	.c-header-menu .sp {
		display: block;
		}
	.c-menu-list-item,
	.c-products-list-item {
		float: left;
		width: 50%;
		box-sizing: border-box;
		border-bottom: solid 1px rgba(255,255,255,0.44);
		box-shadow: 0 1px rgba(51,51,51,0.33);
		background-image: url(../img/common/sp_menu_arrow.png);
		background-position: 98% 90%;
		background-repeat: no-repeat;
		background-size: 8px 8px;
		}
  .c-menu-list-item:nth-child(even),
	.c-products-list-item:nth-child(odd) {
		border-right: solid 1px #72B5E0;
		}
	/*.c-menu-list-item:nth-child(even),
	.c-products-list-item:nth-child(even) {
		/*border-left: solid 1px #146293;
		}*/
	.c-menu-list-item a,
	.c-products-list-item a {
		display: block;
		color: #FFF;
		padding: 2.4rem 5%;
		text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
		}
	
	/* .c-menu-list-item > .c-products */
	.c-products {
		background-image: none;
		background-color: #0268AC;
		width: 100%;
		}
	.c-products-list-item:nth-child(5),
	.c-products-list-item:nth-child(6) {
		border-bottom: none;
		box-shadow: none;
		}
	.c-products-list-item a {
		font-weight: 900;
		}
	
	/* .c-lowermenu-tk */
	.c-lowermenu-tk a {
		display: block;
		background-color: #000;
		padding: 2.4rem 1.4rem;
		color: #FFF;
		}
	.c-lowermenu-tk a::before {
		display: inline-block;
		font-family: 'icomoon' !important;
		content: "\e905";
		padding-right: 1.2rem;
		}
	
	.c-fixed-button {
		display: none;
		}

	}
@media print, screen and (min-width: 769px) {
	.c-header--right {
		display: none;
		}
	.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
		z-index: 5;
		}
	.c-header-logo {
		margin-left: 3rem;
		}
				
  .c-header-menu {
		margin-left: auto;
		}
	.c-header-menu .c-menu-list {
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		}
	.c-header-menu .pc {
		display: block;
		}
	.c-header-menu .c-menu-list-item {
		text-align: center;
		}
	.c-header-menu .c-menu-list-item a {
		display: block;
		color: #FFF;
		margin-left: 1.6rem;
		margin-right: 1.6rem;
		position: relative;
		}
	.c-header-menu .c-menu-list-item a::before {
    content: "";
    display: block;
    position: absolute;
		-webkit-transition: .5s;
		-moz-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
    width: 4px;
    height: 4px;
		transform: rotate(-45deg);
    background-color: rgba(255,255,255,1);
    top: -16px;
    left: 50%;
    margin-left: -2px;
    opacity: 0;
		}
	.c-header-menu .c-menu-list-item:hover a::before {
    opacity: 1;
    top: -12px;
		}

	.c-header-menu .c-menu-list-item.current {
		opacity: 0.7;
		position: relative;
		}
	.c-header-menu .c-menu-list-item.current::before {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
		transform: rotate(-45deg);
    background-color: rgba(255,255,255,1);
    top: -12px;
    left: 50%;
    margin-left: -2px;
		opacity: 1;
		}

	.c-header-primary {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		margin-left: .4rem;
		}
	.c-header-primary--item {
		border-left: solid 1px #5DABDB;
		padding-left: 3rem;
		padding-right: 3rem;
		}
		
	.c-fixed-button {
		position: fixed;
		right: 0;
		top: 40%;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		-o-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		z-index: 99;
		}
	.c-fixed-button a {
		display: block;
		background-color: #000;
		color: #FFF;
		border: solid 1px rgba(255,255,255,0.5);
		border-right: none;
		box-sizing: border-box;
		padding: 3.2rem .8rem 4rem;
		letter-spacing: .6rem;
		position: relative;
		}
	.c-fixed-button a::before,
	.c-fixed-button a::after {
		content: '';
		width: 6px;
		height: 6px;
		border-top: solid 1px #FFF;
		border-right: solid 1px #FFF;
		-ms-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		right: 1.2rem;
		bottom: 3rem;
		-webkit-transition: all .3s ease-in-out;
			 -moz-transition: all .3s ease-in-out;
				 -o-transition: all .3s ease-in-out;
				-ms-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;
		}
	.c-fixed-button a::after {
		bottom: 2.4rem;
		}
		.c-fixed-button a:hover {
			background-color: #990000;
		}
		.c-fixed-button a:hover::before {
			bottom: 2.8rem;
			}
		.c-fixed-button a:hover::after {
			bottom: 2.2rem;
			}
}
@media print, screen and (max-width: 1000px) {
	.c-header-primary {
		margin-left: auto;
		}
  .c-header-primary--item:nth-child(1),
	.c-header-primary--item:nth-child(2) {
		display: none;
		}
}
@media print, screen and (min-width: 769px) and (max-width: 1160px) {
	.c-header-logo {
		margin-left: 2rem;
		}
	.c-header-logo .c-logo--image {
		width: 197.6px;
		}
	.c-menu-list-item {
		font-size: 13px;
		}
	.c-menu-list-item a {
		margin-left: 1.2rem !important;
		margin-right: 1.2rem !important;
		}
	.c-header-primary--item {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
		}
}
@media print, screen and (min-width: 1161px) and (max-width: 1240px) {
	.c-header-logo .c-logo--image {
		width: 197.6px;
		}
	.c-menu-list-item {
		font-size: 13px;
		}
	.c-header-primary--item {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
		}
}


/* =====================================================================

	3. Main Container
	
======================================================================== */
	.l-contents {
		position: relative;
		display: block; /*IE対策*/
		line-height: 2;
		}
	.l-contents a:link,
	.l-contents a:visited {
		color: rgba(0,0,0,0.8);
		}
@media screen and (max-width: 767px) {
	.l-contents {
		line-height: 1.8;
		}
}
@media screen and (max-width: 768px) {
	.l-contents {
		padding-top: 60px; /*固定ヘッダー分の領域*/
		}
	.p-wrap,
	.p-sp-wrap {
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		}	
	.p-sp-nowrap {
		padding-left: 0;
		padding-right: 0;
		}
	.p-mainContents {
		margin-top: 4.8rem;
		}
}
@media print, screen and (min-width: 769px) {
  .l-contents {
		min-width: 960px;
		padding-top: 80px; /*固定ヘッダー分の領域*/
    }
	.l-contents a:hover {
		color: #C47200;
		}
	.p-wrap {
		margin: 0 auto;
		width: 960px;
		position: relative;
		}
	.p-mainContents {
		margin-top: 8rem;
		}
}



/* =====================================================================

	4. PageTop
	
======================================================================== */
	.c-pagetop {
		z-index: 4;
		position: fixed;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		transform: scale(1.5);
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
	}
	.c-pagetop a {
		display: block;
		width: 50px;
		height: 50px;
		border: solid 1px #EDF1F3;
		background-color: #F9FAFB;
		color: #007AC6;
		text-align: center;
		text-decoration: none !important;
		line-height: 50px;
		-webkit-border-radius: 100px;
			 -moz-border-radius: 100px;
						border-radius: 100px;
				-ms-border-radius: 100px;
	}
	.c-pagetop.show {
		opacity: 1;
		filter: alpha(opacity=100);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	.c-chevron-up {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-left: 3px solid #007AC6;
  border-bottom: 3px solid #007AC6;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  box-sizing: border-box;
		}
@media screen and (max-width: 768px) {
	.c-pagetop {
		bottom: 5.6rem;
		right: 1.6rem;
		}
}
@media print, screen and (min-width: 769px) {
	.c-pagetop {
		bottom: 30px;
		right: 30px;
		}
	.c-pagetop a {
		width: 60px;
		height: 60px;
		line-height: 60px;
		}
}




/* =====================================================================

	5. Footer
	
======================================================================== */
	.l-footer {
		background-color: #000;
		color: #FFF;
		}
@media only screen and (max-width: 767px) {	
	.l-footer {
		margin-top: 4.8rem;
		}
}
@media print, screen and (min-width: 768px) {
  .l-footer {
		margin-top: 8rem;
    }
}
@media print, screen and (min-width: 769px) {
  .l-footer {
		min-width: 960px;
		}
}

/*----------------------------------------------------
	footer address
----------------------------------------------------*/
	.p-footer-address {
		background-color: #007AC5;
		}
	.c-fadd address {
		font-style: normal;
		}
@media only screen and (max-width: 767px) {	
	.p-footer-address {
		padding: 3.2rem 0;
		}
	.p-fadd-inner .c-fadd {
		margin-top: 2.4rem;
		line-height: 1.4;
		}
	.c-fadd .c-postcode {
		display: block;
		}
}		
@media print, screen and (min-width: 768px) {
	.p-footer-address {
		padding: 4.8rem 0;
		}
	.p-footer-address h3 {
		margin-bottom: 1.2rem;
		}
	.p-fadd-inner {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		}
	.p-fadd-inner .c-fadd {
		width: 50%;
		}
	.c-fadd {
		line-height: 1.6;
		}
	.c-fadd .c-postcode {
		padding-right: 1em;
		}
	.tb .c-fadd .c-postcode {
		display: block;
		}
	.c-fadd address {
		display: inline-block;
		}
	.c-fadd address+address::before {
		content: "／";
		padding-left: .4rem;
		padding-right: .8rem;
		}
}


/*----------------------------------------------------
	footer menu
----------------------------------------------------*/
@media only screen and (max-width: 768px) {
	.p-footer-menu {
		display: none;
		}
}
@media print, screen and (min-width: 769px) {
	.p-footer-menu {
		padding: 4.8rem 0;
		}
	.c-footer-menu--title {
		border: solid 1px #FFFFFF;
		display: inline-block;
		padding: .8rem 1.6rem;
		margin-bottom: 1.6rem;
		font-family: 'Muli', sans-serif;
		}
	.c-fmenu-inner {
		display: table;
		width: 100%;
		}
	.c-fmenu-list {
		display: table-cell;
		width: 20%;
		}
	.c-fmenu-list-item {
		margin-top: 2rem;
		}
	.c-fmenu-list-item::before {
		content: "-";
		padding-right: .6rem;
		}
	.c-fmenu-list-item.child {
		margin-left: 1em;
		}
		
	.c-fmenu-list-item a {
		color: #FFF;
		}
	.c-fmenu-list-item a:hover {
		opacity: 0.6;
		}
}


/*----------------------------------------------------
	copylight
----------------------------------------------------*/
	.c-copy {
		font-family: 'Muli', sans-serif;
		text-align: center;
		}
@media only screen and (max-width: 767px) {	
	.c-copy {
		padding: 1.6rem 0;
		}
}
@media print, screen and (min-width: 768px) {
	.c-copy {
		padding: 1.6rem 0 4.8rem;
		}	
}


/* =====================================================================

	*. Print CSS
	
======================================================================== */
@media print {
	.c-header,
	.c-spmenu,
	.is-hidden-large {
		visibility: hidden;
		height: 0;
		}
}