@charset "utf-8";


/*--------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------*/
html {
	height: 100%;
	overflow-y: scroll;
}
body {
	margin: 0em;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 18px;
	line-height: 1.5;
	color: #222222;
	background-image: url("../images/back_main.jpg");
	background-size: cover;
}
.container {
	width: 1200px;
	margin: auto;
}
.container960 {
	width: 960px;
	margin: auto;
}
.half_box {
	width: 50%;
}
.trisect_box {
	width: 33.3%;
}
.waku90 {
	width: 90%;
	margin: 0 auto;
}



/*--------------------------------------------------------------------
文字
--------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p {
	padding: 0;
	margin: 0;
}
h1 {
	font-size: 56px;
	font-weight: 900;
	letter-spacing: 0.1em;
}
h2 {
	font-size: 21px;
	margin-bottom: 2em;
	position: relative;
	text-shadow: 0 0 2px white;
	z-index: 0;
	margin-bottom: 0.2em;
}
h2:before {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	top: 50%;
	/* border: dashed 1px white; */
	left: -50px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}
.back_wh2:before {
	background: rgba(255,255,255, 0.7);
}
.back_gh2:before {
	background: rgba(255,232,223, 0.7);
}
h3 {
	font-size: 18px;
}
h4 {
	font-size: 24px;
	margin-top: 2em;
	margin-bottom: 2em;
	border-bottom: 3px solid #e3e3e3;
	padding: 0.3em;
	position: relative;
}
h4::after {
	content: '';
	background-color: #1064b0;
	width: 2em;
	height: 3px;
	position: absolute;
	bottom: -3px;
	left: 0;
	z-index: 1;
}

.white_text {
	color: #fff;
}
.red_text {
	color: #ff4f5e;
}
.danraku {
	text-indent : -1em;
	padding-left : 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 0;
}

.icon {
	padding-bottom: 1.2em;
	padding-right: 0.5em;
}


/*--------------------------------------------------------------------
リンク
--------------------------------------------------------------------*/
a,
a:link {
	text-decoration: underline; color: #0566ca;
	font-weight: bold; 
}

a:visited {
	text-decoration: underline; color: #0566ca;
}

a:hover,
a:active {
	text-decoration: underline; color: #00378c;
}

/* リンク02 トップメインボタン */
a.link02 {
	text-decoration: none; color: #fff;
	font-weight: bold; 
}
a.link02:hover,
a.link02:active {
	text-decoration: none; color: #fff;
}

/* リンク03 共通ナビ */
a.link03 {
	text-decoration: underline; color: #2459a6;
	font-weight: bold; 
}
a.link03:hover,
a.link03:active {
	text-decoration: underline; color: #1e96c8;
}

/* リンク04 商品ページ共通ナビ */
a.link04 {
	text-decoration: underline; color: #fff;
	font-weight: bold; 
}
a.link04:hover,
a.link04:active {
	text-decoration: underline; color: #1e96c8;
}


/*--------------------------------------------------------------------
画像
--------------------------------------------------------------------*/
img {
	/* Responsive images (ensure images don't scale beyond their parents) */
	max-width: 100%;
	/* Part 1: Set a maxium relative to the parent */
	width: auto\9;
	/* IE7-8 need help adjusting responsive images */
	height: auto;
	/* Part 2: Scale the height according to the width, otherwise you get stretching */
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}


/*--------------------------------------------------------------------
ヘッダーメニュー
--------------------------------------------------------------------*/
header {
	height: 60px;
	background: #fff;
	position: relative;
	z-index: 1;
}
/*↓indexのみ*/
.top_logo {
	position: absolute;
	z-index: 100;
	display: inline-block;
	left: 0;
	top: 0;
	background: #fff;
}
/*↓index以外*/
.rest_logo {
	position: absolute;
	z-index: 100;
	margin-left: 5%;
}

/* メニュー*/
.right_box {
	float: right;
}
.global-nav {
	font-size: 16px;
	line-height: 60px;
	font-weight: 500;
}
.global-nav > ul {
	display: flex;
}
.global-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.global-nav li a {
	display: block;
	padding: 0 2em;
	text-decoration: none;
	transition: background-color 0.3s;
}
.global-nav > ul > li {
	position: relative;
}
.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #fdfdfd;
	width: 19em;
}
.dropdown-menu li {
	width: 100%;
}
.global-nav > ul > li:hover .dropdown-menu {
	display: block;
}




.miniform {
	display: none;
}
/* ▼表示領域が900px以上の場合 */
@media screen and (min-width: 1200px) {
   .miniform { display: none; }  /* miniを非表示 */
   .bigform  { display: block; } /* bigを表示 */
}
/* ▼表示領域が890px未満の場合 */
@media screen and (max-width: 1199px) {
   .miniform { display: block; } /* miniを表示 */
   .bigform  { display: none; }  /* bigを非表示 */
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 649px) {
   .bigform02  { display: none; }  /* bigを非表示 */
}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 10000;
  right : 13px;
  top   : 10px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
background :#fff;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #ff4f5e;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#ff4f5e;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#ff4f5e;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 9999;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(255,79,94,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  visibility: hidden;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
  font-weight: 500;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ff4f5e;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible;
}



/*--------------------------------------------------------------------
フッター
--------------------------------------------------------------------*/
.footer_f {
	width: 100%;
	display: flex;
}
.ff-item-a {
	width: 40%;
}
.ff-item-b {
	width: 60%;
	font-size: 117%;
}

#footer	{
	clear: both;
}
#footer small {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	padding-bottom: 20px;
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   #footer small { font-size: 10px; }
}






/*--------------------------------------------------------------------
ページトップへ戻るボタン
--------------------------------------------------------------------*/

.pagetop {
	position: fixed;
	bottom: 65px;
	right: 30px;
	margin: 0 auto;
	z-index: 200;
}
.pagetop a {
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	display: block;
	line-height: 1;
	font-size: 20px;
	padding-top: 15px;
	border-radius: 50px;
	width: 50px;
	height: 35px;
	border: 3px solid #fff;
	background-color: #ff5459;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
.pagetop a:hover {
	text-decoration: none;
	opacity: 0.7;
}




/*--------------------------------------------------*/

/* ▼表示領域が960px以上の場合 */
@media screen and (min-width: 960px) {

}

/* ▼表示領域が1200px未満の場合 */
@media screen and (max-width: 1199px) {
   .container { width:92%; margin-left:4%; margin-right:4%; }
}
/* ▼表示領域が960px未満の場合 */
@media screen and (max-width: 959px) {
   .container960 { width:92%; margin-left:4%; margin-right:4%; }
   h1 { font-size:220%; }
}
/* ▼表示領域が800px未満の場合 */
@media screen and (max-width: 799px) {
   .top_logo { width:45%; }
   .rest_logo { margin-left:2%; }
   .h_logo { width:45%; }

   .footer_f { flex-wrap:wrap; }
   .ff-item-a { width:100%; display:flex; justify-content:center; align-items:center; }
   .ff-item-b { width:100%; display:flex; justify-content:center; align-items:center; margin-top:1em; font-size:107%;}
}
/* ▼表示領域が700px未満の場合 */
@media screen and (max-width: 699px) {
   h1 { font-size:26px; }
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   body { font-size:15px; }
   h2 { font-size:19px; }
   h2:before { width:80px; height:80px; left:-25px; }
   h3 { font-size:15px; }
   h4 { font-size:19px; }
   .container { width:88%; margin-left:6%; margin-right:6%; }
   .container960 { width:88%; margin-left:6%; margin-right:6%; }

   .subtitle_w img { width:65px; }

   .pagetop { bottom:10px; right:5px;}
   .pagetop a { font-size:14px; padding-top:8px; border-radius:30px; width:30px; height:22px; }

}
/* ▼表示領域が400px未満の場合 */
@media screen and (max-width: 399px) {
   h1 { font-size:22px; }
   .rest_logo img { height:50px; margin-top:5px;}
   .subtitle_w img { width:40px; }
   .subtitle_w { padding:0.5em 0.8em; }
}