@charset "utf-8";
/* CSS Document */


.p_left{ margin-left: 20px;}
.left{ text-align: left;}
.right{text-align: right;}
.center{ text-align: center;}
.white{color: #fff;}
.gray{color: #55555;}
.top50{margin-top: 50px;}
.top30{margin-top: 30px;}
.top80{margin-top: 80px;}
.top15{margin-top: 15px;}
.pud30{padding: 30px 0;}
.ptop{padding-top: 20px;}
.pud20{padding: 20px 0;}
.bottom30{padding-bottom: 30px;}
.margin_left{margin-left: 180px;}
.margin_c{margin: 0 auto;}
.padding_c{padding: 0 auto;}
.orange{color: #f39800;}
.large{font-size: x-large;}
.small2{font-size: x-small;}
.small{font-size: small;}
.black{color: #000000;}
.txt{letter-spacing:0.5em;}
.txt2{letter-spacing:0.1em;}
.drop{text-shadow: 1px 2px 3px #313131;}
.gray{color: #677077;}
.b{font-weight: bold;}

html{height: 100%;}
  body {
    margin: 0;
	  height: 100%;
  }

body.oem{
	background: url("../img/body_bg2.png")

}
  .mainVisual {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
  }
  .mainVisual video {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }
  .mainVisual h1 {
    position: absolute;
    top: 12%;
    right: 0;
    bottom: 0;
    left: 0;
    width: 500px;
    height: 92px;
    margin: auto;
    line-height: 92px;
    text-align: center;
    color: #fff;
    font-size: 48px;
	text-shadow: 1px 2px 3px #808080; 
   /* border: 1px solid #fff;
    background: rgba( 0, 0, 0, 0.3 );*/
  }

section.video3 {
  width: 100%;
	height: 450px;
	padding-top: calc(800 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../img/production_oem_top.png) center center / cover no-repeat;
}

@media screen and (max-width: 480px) {
	section.video3{
		width: 100%;
	height: 250px;
		padding-top: calc(800 / 375 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background:url(../img/production_oem_top_sp.png) center center / cover no-repeat;
		
	}
}



section.video4 {
  width: 100%;
	height: 450px;
	padding-top: calc(800 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../img/accessory_top.png) center center / cover no-repeat;
}

@media screen and (max-width: 480px) {
	section.video4{
		width: 100%;
	height: 250px;
		padding-top: calc(800 / 375 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background:url(../img/accessory_top_sp.png) center center / cover no-repeat;
		
	}
}

section.video5 {
  width: 100%;
	height: 450px;
	padding-top: calc(800 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../img/craft_top.png) center center / cover no-repeat;
}

@media screen and (max-width: 480px) {
	section.video5{
		width: 100%;
	height: 250px;
		padding-top: calc(800 / 375 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background:url(../img/craft_top_sp.png) center center / cover no-repeat;
		
	}
}

section.video6 {
  width: 100%;
	height: 450px;
	padding-top: calc(800 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../img/lookaccessory_top.png) center center / cover no-repeat;
}

@media screen and (max-width: 480px) {
	section.video6{
		width: 100%;
	height: 250px;
		padding-top: calc(800 / 375 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background:url(../img/lookaccessory_top_sp.png) center center / cover no-repeat;
		
	}
}


section.video7 {
  width: 100%;
	height: 450px;
	padding-top: calc(800 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../img/whats_yoshimoto_top.png) center center / cover no-repeat;
}

@media screen and (max-width: 480px) {
	section.video7{
		width: 100%;
	height: 250px;
		padding-top: calc(800 / 375 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background:url(../img/whats_yoshimoto_top_sp.png) center center / cover no-repeat;
		
	}
}

@media screen and (max-width: 480px) {
	.mainVisual h1{
		color: #fff;
		font-size: 24px;
		width: 349px;
		text-shadow: 1px 2px 3px #808080; 
		
	}
}

 /* main {
    width: 90%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto;
  }*/
  /*footer {
    width: 100%;
    height: 300px;
    background: #333;
  }*/
  @media screen and (min-width: 768px) {
    .mainVisual {
      height: 500px;
    }
  }

/* =============================================
メディアクエリ
============================================= */

/* 大デバイス（デスクトップ, 1200px 未満）
==============================================*/
@media screen and (max-width: 1199.98px) {
  .herounit h1 {
    margin-top: 10rem; } }
/* END */
/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {
  .container {
    max-width: 740px; } }
/* END */
/* 小デバイス（横向きモバイル, 768px 未満）
==============================================*/

.container {
  width: 100%;
	padding-top: 30px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
color: #111;}
  @media (min-width: 576px) {
    .container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .container {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .container {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px; } }

/* ====== 共通 ====== */
a {
  color: #fac564;
  text-decoration: none;
 }
a.pan2 {
  color: #ffffff;
  text-decoration: none;
 }

a:link.pan2 {
  color: #ffffff;
  text-decoration: none;
 }
a:hover {
    text-decoration: none;
    /*opacity: 0.8;*/
}
.img-fluid {
  max-width: 100%;
  height: auto; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

ol.pan{ margin-left: 0;}

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }



 .buttom_top_c {
    width:315px;
	 font-size: 14px;
    text-decoration:none;
    display:block;
    text-align:left;
    padding:15px;
    color: #313131;
    background-color:#fff;
	border: 1px solid #ddd;
    border-radius:5px;
	 margin: auto;
	 line-hight: 1;
	
}

.buttom_top_c:hover{
	 color: #313131;
     background-color: #f5f5f5;
	 border: 1px solid #000;
	 line-hight: 1;
}

#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
	margin: 30px 0 10px;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 0 30px;
}

.active a {
      color: #fac564 !important; }


/*head*/
/* Fixed */

#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 100px;
    background: #000;
    /*background: rgba(0,0,0,.7);*/
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #fff;
    padding: 0 20px;
}
#top-head.fixed #global-nav ul li a:hover{
    color: #fac564;
    padding: 0 20px;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}


@media screen and (max-width: 640px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #000;
        width: 100%;
        height: 80px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
		
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

.inner {
    width: auto;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
    top: -100px;
    /*position: absolute;*/
	position: fixed;
    width: 100%;
    margin: 100px auto 0;
    padding: 10px 0 0 0;
    line-height: 1;
    z-index: 999;
	background: #000;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-size: 36px;
}


@media screen and (max-width: 767.98px) {
  h1 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2; }

  #sec3 {
    background-image: none; }

  header .navbar-brand {
    width: 70%; }
    header .navbar-brand .logo {
      width: 100%; }
  header .navbar-nav {
    border-top: 1px solid #fff; }
    .footer-logo {
  width: 100%;
}

}
/* END */
/* 極小デバイス（縦向きモバイル, 576px 未満）
==============================================*/
@media screen and (max-width: 575.98px) {
  .display-3 {
    line-height: 0.8em; }

  .display-4 {
    font-size: 2rem;
    line-height: 1.2; } }
/* END */
.mobileHidden { display:none;}
 
@media screen and (min-width:480px) { 
    .desktopHidden { display:none;}
    .mobileHidden { display:inline;}
}

.col_2_head{
	padding-bottom: 30px;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content: flex-end;
	 position: absolute;
 top: 0px;
 right: 0;
}


.col_2_head > div.head{
	width: 13%;
	padding: 0;
	color: #f39800;
	text-align: left;
	line-height:1.5;
	font-size: small;
	letter-spacing: 0.4em;

}
.txt_1{letter-spacing:0.1em;
font-size: x-large;}

.col_2_head > div.head_c{
	width: 15%;
	padding: 0;
	color: #f39800;
	text-align: right;
	line-height:1.5;

}


@media screen and (max-width: 480px) {
	.col_2_head > div.head{
		width: 100%;
		
	}
}

@media screen and (max-width: 979px) {
	.pcview {
		display: none;
	}
	.spview {
		display: block;
	}
}


 .buttom_head {
    width:200px;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:10px 3px 8px;
    color:#fff;
    background-color:#f39800;
    border-radius:5px;
	 margin: auto;	
}

 .buttom_cat {
    width:200px;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:10px 3px 8px;
    color:#fff;
    background-color:#677077;
    border-radius:5px;
	 margin: auto;	
}

@media screen and (max-width: 480px) {
	.buttom_cat{
		width: 100%;
		text-align: center;
		margin-left: 0;
		
	}
}


.header-title{
 position: relative; /*必ず必要*/

 z-index: 3; /*必ず必要*/
 display: flex;
 width: 50%;
 justify-content: center;
 align-items: center;
 text-align:center;
 margin: auto;
}


	/*ぱんくず*/
.pan {
  margin-left: 0;
  padding-left: 0;
	color: #111111;
}

.pan li {
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/

}

.pan li:after {/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 3px;
  color: silver;
}

.pan li:last-child:after {
  content: '';
}

.pan li a {
  text-decoration: none;
  color: #111111;
}



.pan2 {
  margin-left: 0;
  padding-left: 0;
	color: #ffffff;
	font-weight: bold;
}

.pan2 li {
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/

}

.pan2 li:after {/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 3px;
  color: silver;
}

.pan2 li:last-child:after {
  content: '';
}

.pan2 li a {
  text-decoration: none;
  color: #ffffff;
}

a.pan2 {
text-decoration : none;
color : #ffffff;
}

a:link.pan2 {
text-decoration : none;
color : #ffffff;
}



.mobileHidden { display:none;}
 
@media screen and (min-width:480px) { 
    .desktopHidden { display:none;}
    .mobileHidden { display:inline;}
}




/*top 4カテゴリ*/
/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

/* コンテンツ下のマージン */
.flex-child { margin-bottom: 10px; }

/* 各カラム毎のコンテンツと疑似要素の横幅 */
.flex-col2 .flex-child { width: calc( (100% - 10px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child { width: calc( (100% - 20px) / 3 ); }

.flex-col4::before,
.flex-col4::after,
.flex-col4 .flex-child { width: calc( (100% - 30px) / 4 ); }
	
/* 最終行は両端揃えにしない */
.flex-col3::after,
.flex-col4::before,
.flex-col4::after { content: ""; }

.flex-col4::before { order: 1; }

/* レスポンシブ対応 */

/* 991px以下で4列 → 3列 */
/*@media screen and (max-width: 991px) {
	.flex-col4::after,
	.flex-col4 .flex-child { width: calc( (100% - 20px) / 3 ); }
}*/

/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child,	
	.flex-col4 .flex-child { width: calc( (100% - 10px) / 2 ); }
}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child,
	.flex-col4 .flex-child { width: 100%; }
}


.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }


*, *:before, *:after {
	box-sizing: border-box;
}
.col_2.oem1{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding-top: 5px;
}


.col_2 > div.oem1{
	width: 50%;
	padding: 10px;
	color: #313131;
	text-align: center; 
}
@media screen and (max-width: 960px) {
	.col_2 > div.oem1{
		width: 100%;
	}
}


/*サイド*/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding-top: 30px;
}


.col_2 > div{
	width: 50%;
	padding: 10px;
	color: #313131;
	text-align: center; 
}
@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 100%;
	}
}


.col_2 > div.side{
	width: 30%;

}
.col_2 > div.main{
	width: 70%;
	padding: 5px;
	text-align: left;
	background: #fff;
}

.col_2 > div.main .inbox{
	width: 95%;
}


@media screen and (max-width: 960px) {
	.col_2 > div.side{
		width: 100%;
	}
	.col_2 > div.main{
		width: 100%;
		text-align: left;
	}
}

.col_2 > div.side:first-child{
  order:2;
}

.col_2 > div.main:last-child{
   order:1;
}


/*プライバシー*/
.l_line{
	padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f5f5f5;/*背景色*/
  border-left: solid 5px #535353;/*左線（実線 太さ 色）*/
	margin-bottom: 20px;
	font-weight: bold;
}

.privacy_box{
	width: 95%;
	height: auto;
	border: 2px solid #ccc;
	padding: 10px;
}

.p_title{
	font-weight: bold;
	border-bottom: 1px dotted #ccc;
	width: 100%;
	margin-bottom: 10px;
	color: #666;
	font-size: 18px;
}
.p_subtitle{
	font-weight: bold;
	width: 100%;
	margin-bottom: 10px;
}

ul li.privacy {
	list-style:disc;
	color: #494949;
	
}
ol li.privacy {
	list-style:decimal;
	color: #494949;
}
li.privacy {
	margin-left:0.5em;
	color: #494949;
}

dt.privacy {
	margin-bottom:0.5em;
	border-bottom:1px dotted #ddd;
}
dt.privacy:before {
	content:"\0025a0";
}
dd.privacy {
	margin-bottom:1em;
}

/*================================================
 *  サブコンテンツ
 ================================================*/
ul.submenu{padding: 0;}
.submenu li {
	margin:0;
	padding:0;
	list-style:none;
	text-align: center;
	font-size: 14px;
}
.submenu li a:before {
	color:#313131;
}


.submenu li a {
	display:block;
	padding:16px 2px;
	color:#313131;
	border:1px solid #ddd;
	border-bottom: none;
	text-decoration:none;
}
.bo{
	border-bottom: 1px solid #ddd;

}
.submenu li a:hover {
	background:#eee;
}
ul.bnr{padding: 0;}
.bnr {
	overflow:hidden;
	padding-top: 30px;
}

.bnr ul {
	overflow:hidden;
}

.bnr li {
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
.bnr li a:hover {
	/*opacity:0.8;*/
	filter:alpha(opacity=80);
	-ms-filter:"alpha( opacity=80 )";
}
.bnr img {
	width:100%;
}

#sub {
		float:none;
		width:100%;
	}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

/*カテゴリ*/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3.c{
	padding-top: 20px;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div.c{
		width: 30.33333%;
	margin: 10px;
	padding: 15px;
	color: #ffffff;
    background: #b67a24;/*背景色*/
	text-align: center;
}



.col_3 > div.cr{
		width: 30.33333%;
	margin: 10px;
	padding: 15px;
	color: #ffffff;
    background: #7a8a59;/*背景色*/
	text-align: center;
}

.col_3 > div.ca{
		width: 30.33333%;
	margin: 10px;
	padding: 15px;
	color: #ffffff;
    background: #f39800;/*背景色*/
	text-align: center;
}

.col_3 > div.oem{
		width: 30.33333%;
	margin: 10px;
	padding: 15px;
	color: #ffffff;
    background: #677077;/*背景色*/
	text-align: center;
}


.col_3 > div.oem2{
		width: 100%;
	margin: 10px;
	padding: 15px;
	color: #ffffff;
    background: #677077;/*背景色*/
	text-align: center;
}


@media screen and (max-width: 960px) {
	.col_3 > div.c{
		width: 50%;
		flex-direction: column;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div.c{
		width: 100%;
	}
}

@media screen and (max-width: 960px) {
	.col_3 > div.cr{
		width: 50%;
		flex-direction: column;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div.cr{
		width: 100%;
	}
}

@media screen and (max-width: 960px) {
	.col_3 > div.ca{
		width: 50%;
		flex-direction: column;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div.ca{
		width: 100%;
	}
}

@media screen and (max-width: 960px) {
	.col_3 > div.oem{
		width: 50%;
		flex-direction: column;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div.oem{
		width: 100%;
	}
}
.col_3 > div.c a{text-decoration: none; color: #ffffff;}
.col_3 > div.cr a{text-decoration: none; color: #ffffff;}
.col_3 > div.ca a{text-decoration: none; color: #ffffff;}
.col_3 > div.oem a{text-decoration: none; color: #ffffff;}
.col_3 > div.oem2 a{text-decoration: none; color: #ffffff;}



h3.sub {
	width: 100%;
	margin-bottom:0.5em;
	margin-left: 0;
	padding:16px 5px;
	color:#000;
	font-size:16px;
	border-top: 2px solid #000;
	border-bottom: none;
	text-align: center;
}

h3.sub2 {
	width: 100%;
	margin-bottom:0.5em;
	margin-left: 0;
	padding:18px 5px 0;
	color:#000;
	font-size:16px;
	border-top: 2px solid #000;
	border-bottom: none;
	text-align: center;
}

/*メインコンテンツ*/
h3.accessory {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#b67a24;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #b67a24;
	text-align: left;
}
h3.accessory2 {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#b67a24;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #b67a24;
	text-align: center;
}



h3.crafts {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#7a8a59;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #7a8a59;
	text-align: left;
}
h3.crafts2 {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#7a8a59;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #7a8a59;
	text-align: center;
}

h3.whats {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#697279;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #697279;
	text-align: center;
}

h3.whats2 {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#697279;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #697279;
	text-align: left;
}


h3.packege {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#614b57;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #614b57;
	text-align: center;
}
h3.packege2 {
	margin-bottom:0.5em;
	padding:0 5px;
	color:#614b57;
	font-size:16px;
	font-weight: bold;
	border-bottom: 2px solid #614b57;
	text-align: center;
}
.accessory_box {
    padding: 0.5em 1em;
    margin: 0;
    color: #ffffff;
    background: #b67a24;/*背景色*/
	text-align: center;
}
.accessory_box p {
    margin: 0; 
    padding: 0;
}

.crafts_box {
    padding: 0.5em 1em;
    margin: 0;
    color: #ffffff;
    background: #7a8a59;/*背景色*/
	text-align: center;
}
.crafts_box p {
    margin: 0; 
    padding: 0;
}

.cat_box {
    padding: 0.5em 1em;
    margin: 0;
    color: #ffffff;
    background: #f39800;/*背景色*/
	text-align: center;
}
.cat_box p {
    margin: 0; 
    padding: 0;
}

.whats_box {
    padding: 0.5em 1em;
    margin: 0;
    color: #ffffff;
    background: #697279;/*背景色*/
	text-align: center;
}
.whats_box p {
    margin: 0; 
    padding: 0;
}

ul.whats{
    padding: 30px 0 0 0;
    margin: 0;
    width: 100%;
}
li.whats {
    padding:5px 0;
    margin: 0;
    float: left;
    width: 16.6%;
    box-sizing:border-box;
    display: block;
    text-align: center;
    /*border: 1px #dddddd solid;
   /* background:#eeeeee; /* デフォルト */
    /*background:-moz-linear-gradient(top, #4169e1, #ffffff); /* Safari,Chrome */
   /* background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));/* Firefox */
    /*background: linear-gradient(to bottom, #ffffff, #eeeeee);   /* ie10 */
}

@media screen and (max-width: 640px){
/* 640px以下は3列 */
li.whats {
    width: 33.3%;
}
}
@media screen and (max-width: 320px){
/* 320px以下は２列 */
li.whats {
    width: 50%;
}
}


/*Footer*/
footer{background: #000;

}
*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	padding:20px;
	font-size: 12px;
	line-height: 24px;
}


.col_4 > div.foot{
	width: 25%;
	padding: 10px;
	text-align: left;
	
	
}

.col_4 > div.map{
	background-image: url(../img/japanmap.png);
	background-repeat: no-repeat;
	width: 25%;
	padding: 10px;
	text-align: left;
	color: #fff;
	
}

.col_4 a{text-decoration: none;
color: #fac564;}


@media screen and (max-width: 960px) {
	.col_4 > div.foot{
		width: 33.33333%;

}
@media screen and (max-width: 480px) {
	.col_4 > div.foot{
		width: 100%;
		flex-direction: column;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div.map{
		width: 100%;
		flex-direction: column;
	}
}
	
	/* ====== TOTOP ====== */
/* ページトップ */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 80%; }

#page-top a {
  background: #f39800;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 25px 0;
  text-align: center;
  display: block;
  border-radius: 10px; }

#page-top a:hover {
  text-decoration: none;
  background: #fac564; }

.btn-outline-secondary:hover {
    color: #6c757d; }
}


/*youtube*/


.video-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
 
.video-wrap iframe,  
.video-wrap object,  
.video-wrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}



ul.plannav {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: #5d7987;
}
ul.plannav li {
	float: left;
}
ul.plannav li a {
	display: block;
	padding: 14px 16px;
	text-align: center;
	text-decoration: none;
	color: white;
}
ul.plannav li a:hover:not(.active) {
	background-color: #a9bce2;
}
ul.plannav li a.active {
	background-color: #fff;
	color: #5d7987;
}
ul.plannav li.right {
	float: right;
}
@media screen and (max-width: 480px) {
	ul.plannav li.right, ul.plannav li {
		float: none;
	}
}

/*タブ*/
.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	margin: 0 auto 1em auto;
}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) {
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 15px;
	cursor: pointer;
	border-bottom: 0;
	background-color: #5d7987;
	color: #000;
	border-radius: 6px 6px 0 0;
	margin-bottom: 0;

}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
	color: #0066cc;
	background-color: #fff;
}
.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #cccccc;
	/*border-bottom: 1px solid #ffffff;/*背景色と同じ*/
	border-radius: 6px 6px 0 0;
	background-color: #fff;
}

.planning {
	padding: 0.5em 1em;
	/*border-top: 1px solid #cccccc;*/
	background-color: #fff;
}


.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;
	/*border-top: 1px solid #cccccc;*/
	background-color: #fff;
}

.tab_box{
	width: 100%;
	color: #aaabac;
	text-align: center;
		
}

.tabbox1 {
    padding: 0.5em 1em;
    margin: 0 0 0 auto;
    font-weight: bold;
    border: solid 3px #5d7987;
	width: 200px;
	position: right;
	color: #5d7987;
}

a.t_box1:link {color: #5d7987;
text-decoration: none;}

.tabbox1 p {
    margin: 0; 
    padding: 0;
	color: #5d7987;

}


@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
	}
	.cp_tab label {
		padding: 0.5em;
	}
}

.tab_box_bg{
	width: 100%;
	height: 600px;
	background: url("../img/planning/prototype_step3_pc.png");
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
.tab_box_bg_in {
    padding: 50px 10px;
    margin: 50px 50px 0 auto;
    width: 90%;
    max-width: 560px;
	position: absolute;
	left:35%;
}



@media screen and (max-width: 480px) {
	.tab_box_bg{
		width: 100%;
	height: 600px;
	background: url("../img/planning/prototype_step3_pc.png");
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
}

@media screen and (max-width: 480px) {
	.tab_box_bg{
		width: 100%;
	height: 600px;
	background: url("../img/planning/prototype_step3_pc.png");
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}
}

/*table*/
table {
	width:95%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
	color: #313131;
}
th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;
}
td {
	padding:10px;
	text-align:left;
	border:1px solid #ddd;
}

table.hp {
	width:95%;
	margin-bottom:1em;
	padding-top: 20px;
	border-collapse:collapse;
	border:1px solid #ddd;
}
th.hp {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #ddd;
	background:#f5f5f5;
}
td.hp {
	padding:10px;
	vertical-align:middle;
	text-align:left;
	border:1px solid #ddd;
}



.gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90%;
}