@charset "utf-8";
/************************************************************
PC
************************************************************/
@media all and (min-width:769px){
.sp {
	display: none;
}
/* Underline From Left */
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #fbc429;
  height: 1px;
  margin-top: 10px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}
/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e94c07;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/* Sweep To Left */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e94c07;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*header*/
#header {
	width: 100%;
	margin: auto;
	background-color: #ffffff;
	position: fixed;
	z-index: 12;
}
#header h1.logo-cl {
  line-height: 2;
	  -moz-transition: height 0.3s;
  -o-transition: height 0.3s;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}

/* 縮小時のサイトロゴ */

	#header.smaller .logo-cl li:first-child{
width: 70px;
margin-right: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

	}
	#header.smaller .logo-cl li:last-child{
width: 120px;
padding-top: 5px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

	}
	#header.smaller .header-menu ul {
		margin: 0;
		padding: 45px 0 0;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
	}
	#header.smaller .header-sns ul {
		margin: 0;
		padding: 39px 0 0;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
	}

	#header .inner {
		width: 100%;
		margin: auto;
		display: flex;
	}
	#header .logo-cl {
		width: 350px;
		margin: 25px auto 25px 30px;
	}
	#header .logo-cl li{
	float: left;
	}
	#header .logo-cl li:first-child{
width: 100px;
margin-right: 20px;
	}
	#header .logo-cl li:last-child{
width: 180px;
padding-top: 5px;
	}

	#header .logo-cl img {
		width: 100%;
	}
	#header .header-menu {
		width: 610px;
		text-align: center;
	}
	#header .header-menu ul {
		margin: 0;
		padding: 60px 0 0;
	}
	#header .header-menu ul li{
		list-style: none;
		display: inline-block;
		margin-left: 20px;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.1em;
	}
	#header .header-menu ul li a{
		text-decoration: none;
		color: #000000;
		transition: .15s;
	}
		#header .header-menu ul li:first-child{
		margin-left: 0;
	}

	#header .header-menu ul li a:hover{
		color: #fbc429;
	}
	#header .header-sns {
		width: 26%;
		max-width: 180px;
		margin-left: 30px;
		margin-right: 12px;
		text-align: center;
		padding-right: 30px;
	}
	#header .header-sns ul {
		margin: 0;
		padding: 52px 0 0;
	}
	#header .header-sns ul li{
		list-style: none;
		display: inline-block;
		margin-left: 10px;
	}
	#header .header-sns ul li a {
		transition: .15s;
		font-size: 23px;
	}
	#header .header-menu ul li a:hover{
		color: #fbc429;
	}
	#header .header-sns ul li a .fa-facebook-square {
		color: #3765a3;
	}
	#header .header-sns ul li a .fa-twitter-square {
		color: #01abee;
	}
	#header .header-sns ul li a .fa-line {
		color: #4ecd01;
	}
	#header .header-sns ul li a .fa-instagram {
		color: #ffffff;
		font-size: 20px;
		line-height: 1.145em;
		letter-spacing: 0em;
		width: 22px;
		height: 22px;
		border-radius: 5px;
		background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
		background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
		background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
		background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
		background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
	}
	#header .drawer {
		display: none;
	}
	#header .magazine {
		width: 7px;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		background-color: #e94c07;
		z-index: 99;
	}
	#header .magazine-button {
		position: fixed;
		top: 50%;
		right: 5px;
		width: 67px;
		height: 260px;
		background-image: url("../img/header/magazine@2x.png");
		background-size: contain;
		background-repeat:  no-repeat;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		display: inline-block;
		text-align: center;
		transform: translateY(-50%);
		z-index: 100;
	}
	#header .magazine-button a {
		font-size: 15px;
		color: #ffffff;
		line-height: 4.0;
	}
}

/************************************************************
SP
************************************************************/
@media all and (max-width:768px){
	.pc {
	display: none;
}
/*header*/
#header {
	width: 100%;
	margin: auto;
}
	#header .inner {
		width: 100%;
		height: 100px;
		margin: auto;
		display: flex;
	}
	#header .logo-cl {
		height: 55px;
		margin: auto auto auto 15px;
	}
	#header .logo-cl img {
		height: 100%;
	}
	#header .header-menu {
		display: none;
	}
	#header .header-sns {
		display: none;
	}
	#header .magazine-button {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: right;
		z-index: 99;
	}
	#header .magazine-button a {
		width: 80px;
		padding: 20px 5px;
		margin: auto 10px 10px auto;
		border-radius: 50%;
		background-color: #e94c07;
		text-align: center;
		font-size: 14px;
		line-height: 1.2;
		color: #ffffff;
		margin-top: 20px;
		display: inline-block;
	}
	#header .magazine a span {
		font-size: 28px;
		color: #ffffff;
	}
		#header .logo-cl {
		width: 95%;
		margin: 5% auto 25px 5%;
	}
	#header .logo-cl li{
	float: left;
	}
	#header .logo-cl li:first-child{
width: 60px;
margin-right: 10px;
	}
	#header .logo-cl li:last-child{
width: 100px;
padding-top: 5px;
	}

	#header .logo-cl img {
		width: 100%;
	}
}

/************************************************************
HTML TAGS
************************************************************/
*{
	margin:0;
	padding:0px;
}

body {
	margin: 0px;
	padding: 0px;
	color:#000000;
	font-style: normal;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing:1px;
	font-feature-settings : "palt";
	letter-spacing: 0.075em;
	-webkit-text-size-adjust: 100%;
	font-family: "游ゴシック体", "Yu gosic", Yugosic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-feature-settings: 'pkna';
	font-feature-settings: 'pkna';
}


::selection {
	background:#000033; /* Safari */
	color:#fff;
}

::-moz-selection {
	background:#000033; /* Firefox */
	color:#fff;

}

h1{}

h2{}

h3{}

h4{}

h5{}

p{
	font-weight:normal;
	letter-spacing:0.075em;
	font-size:14px;
	line-height:1.7;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th{line-height:1.5;}

td{line-height:1.5;}

ul,ol{list-style-type:none;	color:#666666;
}

li img, dt img, dd img{vertical-align:bottom;}

hr{margin:0px;padding:0px;}


a{
	outline:none;
	text-decoration:none;
}
img {
	vertical-align: top;
}
a img{
	border:none;
}


/* custom size*/

textarea{
	font-size:93%;
}

.clear{
	clear:both;
	font-size:0;
	line-height:0;
	height:0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*ﾂ･*//*/
  height: auto;
  overflow: hidden;
  /**/
}