﻿.bg_color1 {background-color: #57baa3;}
.bg_color2 {background-color: #94dfcd;}
.bg_color3 {background-color: #b0cbe7;}
.txt_color1 {color: #57baa3;}
.txt_color2 {color: #57baa3;}
.txt_color3 {color: #87afda;}
.border_color1 {border-color: #b0cbe7;}
.border_color2 {border-color: #94dfcd;}
.border_color3 {border-color: #94dfcd;}
.border_color4 {border-color: #94dfcd;}
.hvr_bg_color2:hover {background-color: #94dfcd;}

/* ----------　all　---------- */
.linkStyle{
	color:#87afda;
}
.linkStyle:hover{
	color:#87afda;
	opacity: 0.7;
	transition: all 0.5s;
}
.font_6dw {
    font-size: -webkit-calc(1rem - 3px);
    font-size: calc(1rem - 3px);
}
.font_14 {font-size: 16px;}
#pc_nav li{
    padding: 10px 0;
}
/*--　日英切り替え　--*/
#top_pc_nav .t_nav li:first-child {
       margin-left: 20px;
}
#top_pc_nav .t_nav li:last-child {
    margin-right: 0px;
}
.t_nav li {
    height: 20px;
	text-align: center;
}	
.t_nav li a {
    height: 20px;
}	
.t_nav li span{transition: 0.3s;}
.t_nav li span:nth-child(1) {
    text-align: center;
display: block;
}
#main_img .t_nav li span:nth-child(1) {
color: #333;
}
.t_nav li span:nth-child(2) {
	opacity:0;
	position: relative;
	top: -1.9em;
    color: #87afda;
    color: #757575;

}
.t_nav li:hover span:nth-child(1) {opacity: 0;}
.t_nav li:hover span:nth-child(2) {opacity: 1;}

#top_pc_nav .t_nav li{
    margin-right: 10px;
}
#top_pc_nav .t_nav li span:nth-child(2) {
        top: -2em;
    font-size: -webkit-calc(1rem - 5px);
    font-size: calc(1rem - 5px);
    letter-spacing: 0px;
}
.nav_menu_more:first-of-type a .icon:before {
    opacity: 0;
}
.back1:before,.back2:before {
    background-image: url(Dup/img/back.png);
}
.overlay {
    background-image: url(Dup/img/back.png)!important;
    background-color: rgba(229 ,247 ,243 ,0.95)!important;
}
.overlay ul li a {
    color: #333;
}
#overlay .left li:before {
    color: #58baa3;
}
#overlay .left, #overlay .right {
    border-color: #58baa3;
}
#overlay .right .border_do1-b{
    color: #333;
    border-bottom: 1px dotted #58baa3;
}
#overlay .right h2 {
        color: #58baa3;
}
#overlay .right p a {
        color: #333;
}
.button_container.active .top {
    background: #58baa3;
}
.button_container.active .bottom {
    background: #58baa3;
}
.button_container.active span:nth-of-type(1) {
    color: #58baa3;
}
#overlay .left li:before {
    font-size: 16px;
}

#header{
padding: 0 2%!important;
}
.top header {
    z-index: 0;
}
header .link{
width: 30%;
    max-width: 180px;
    margin-left: 30px;
}
header.scr_header .link{
    max-width: 180px;
}
header #pc_nav{
margin-left: auto;
}
header.scr_header #pc_nav{
margin-left: auto;
}
header #logo {
    max-width: 200px;
}
#overlay .left li span{
    font-size: 14px;
}
#overlay .left li {
    max-width: 230px;
    letter-spacing: 2px;
}
.menu a{
    max-width: 200px;
}
footer #logo2 a{
    max-width: 150px;
}
/* ----------　TOP　---------- */
#main_img .menu .bg_white{
    background-color: rgba(255 ,255 ,255,0.7);
}
.video_wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
video {
	min-width: 100%;
	min-height: 100vh;
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#intro h3{
text-align: center;
}
#top_pc_nav {
    display: block;
}
#main_img:before {
    background-color: transparent;
}

.top .banner_box{
padding-top: 80px;
    z-index: 1;
    position: relative;
}
.top .banner{
    width: 40%;
    margin: 0 2%;
    max-width: 350px;
}
.top_cms_box:first-of-type {
    padding-top: 80px;
}

/* ----------　下層ページ　---------- */
.youtube_box{
  position: relative;
  width: 80%;
  padding-top: 44.8%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.youtube_box:empty {
    display: none;
}
#page_title .page_title_box {
     background-image: url(Dup/img/back.png);
}
#page7 .cate_box {
    border-color: #caefe6;
}
#page10 .con_box .more_btn .en {
font-size: 14px;
}


/* ----------　IE　---------- */
@media all and (-ms-high-contrast: none){
  .sample{

  }
}

/* ----------　タブレット　---------- */
@media screen and (max-width: 768px){
r.scr_header #logo{
    max-width: 150px;
}
header .link {
    max-width: 180px;
}
#main_img{
	position: relative;
	height: auto;
	width: 100%;
}

.video_wrap {
	position: static;
	overflow: hidden;
	width: 100%;
	height: auto;
	min-width: 100%;
}
video {   
	min-width: auto;
	min-height: auto;
	width: 100%;
	z-index: 1;
	position: static;
	top: 0%;
	left: 0%;
	-webkit-transform: translate(0%, 0%); 
	-ms-transform: translate(0%, 0%);
	transform: translate(0%, 0%); 
vertical-align: bottom;
}
.font_2dw_tb {
    font-size: 16px;
}
header .overlay .link {
    width: 100%;
    max-width: 220px;
    margin-left: 0px;
    margin-top: 20px;
}
.menu a {
    max-width: 120px;
}
}


/* ----------　スマホ　---------- */
@media screen and (max-width: 667px){
.youtube_box{
  width: 100%;
  padding-top: 56%;
}
#main_img .menu {
display:none;
}
.top_cms_box:first-of-type {
    padding-top: 50px;
}
header{
    padding: 5px 0;
}
.top header {
    z-index: 5;
    opacity: 1;
}
.top .banner_box {
    padding-top: 50px;
}
.top .banner {
    width: 80%;
    margin: 0 2% 40px;
    max-width: 300px;
}
.top .banner:last-child {
    margin: 0 2% 0px;
}
.page_title_box  p{
    font-size: 14px;
}
#cms_2-b .cate .cate_box{
padding: 15px;
}
.font_100per_sp {
    font-size: 17px;
}
#overlay .left li:before {
    font-size: 14px;
}

#overlay .left li {
    max-width: 400px;
    letter-spacing: 1px;
}
.overlay.open .overlay-menu {
    padding: 0 9% 0 10%;
}
header #logo {
    margin-bottom: 0px;
    max-width: 130px;
}
header.scr_header #logo {
    width: 100%;
    max-width: 130px;
    margin-bottom: 0px;
}
header .d_flex{
    padding-top: 5px;
    padding-bottom: 15px;
}
.overlay ul {
    height: 70%;
}
header .d_flex {
    padding-top: 10px;
    padding-bottom: 10px;
}
#fakeloader .fl {
    max-width: 170px;
}
}