@charset "UTF-8";

html{
	font-size:62.5%;
	scroll-behavior: smooth;
	}

*,*::before, *::after{
	box-sizing:border-box;
	}


body{
	width: 100%;
	font-family: quasimoda, sans-serif;
	font-weight: 100;
	font-style: normal;
	}

ul {
  list-style: none;
	padding: 0;
}

i{  
font-family:"FontAwesome";
font-style:normal;  
} 

a {
text-decoration: none;
display:block;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:90px;
  margin-top:-90px;
}

/*日本語*/
.font{
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 100;
}

/* --------------------------------
 * サイトオープン時の遅れ
 * -------------------------------- */

.header-f {
    animation: fadeIn 0s ease 0s 1 normal;
    -webkit-animation: fadeIn 0s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* --------------------------------
 * アニメーション　下からフワッと
 * -------------------------------- */
.fadein {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 1000ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



/* --------------------------------
 * header
 * -------------------------------- */
.titleH1{
	display: flex;
	position: absolute;
}
.header_logo {
	margin: 0 15% 0;
}
.header_logo img{
	width: 50px;
}
.header_logo_sp{
	display: none;
}
.sh1{
	width: 400px;
	margin: 17px 0 0;
}


/*ハンバーガー*/
.global-nav {
	width:100%;
	/*position: relative;*/
  　top: -115px;
	right: 7%;
}

header nav ul{
	justify-content: flex-end;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing:0.3rem;
}

/* --------------------------------
 * main
 * -------------------------------- */
.main_m{
	margin-top: 10px;
}

/* --------------------------------
 * 実績（performance）
 * -------------------------------- */
#performance{
	margin: 150px 0 50px;
}


.performance_text{
	margin: 50px 0 50px;
	text-align: center;
	letter-spacing:0.3rem;
	font-size: 2rem;
	font-weight:100;
}

.swiper-container_2{
	width: 80%;
	height: 300px;
	margin: 0 auto;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.1);
}

.performance_text span{
	font-weight: 100;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}




/* --------------------------------
 * content
 * -------------------------------- */
.content{
	margin: 180px 0;
}

.content_box{
	margin: 100px 0;
}

h2{
	margin: 0 0 50px;
	text-align: center;
	letter-spacing:0.3rem;
	font-size: 2rem;
	font-weight:100;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.box{
	width: 80%;
	display: flex;
	margin: 0 auto;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.1);
}


.flex_b{
	margin: 0 auto;
	padding: 20px;
	width: 50%;
	letter-spacing:0.3rem;
	font-size: 1.8rem;
	font-weight:100;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.flex_box{
	margin: 20px 0;
	width: 100%;
	border-bottom: 1px #CFCECE solid;
}

.flex_m{
	margin: 0 0 20px;
}

.flex_box_l{
	width: 100%;
}

.flex_box_2{
	width: 100%;
}

.flex_box_3{
	width: 50%;
	padding: 20px;
}

.flex_box_3 img{
	width: 100%;
}

/* --------------------------------
 * footer
 * -------------------------------- */

footer{
	margin: 0 10% 0;
}

.logo_poz{
	position: relative;
	left: 82%;
	width: 100px;
}

.logo_poz img{
	width: 100%;
}

.footer_box{
	position: relative;
	bottom: 180px;
	margin-bottom: -180px;
}

.footer_nav{
	margin-bottom: 80px;
	display: flex;
	font-size: 1.2rem;
	font-weight: bold;
	letter-spacing:0.3rem;
}

.footer_nav li{
	margin:0 5% 0 0;
}

.footer_nav a{
	color: #000;
}

.footer_nav a:hover{
	opacity: 0.5;
	-webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.footer_box p{
	margin-top: 20px;
	font-size: 1.5rem;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


/* --------------------------------
 * メディアクエリー
 * -------------------------------- */
@media screen and (max-width: 768px) {
	
	/* --------------------------------
 * header_sub
 * -------------------------------- */
main{
		margin-top: 30px;
	}
	
.titleH1{
	position: inherit;
	margin-top: 17px;
}
.header_logo{
	display: none;
}
.header_logo_sp{
	display: block;
	width: 50px;
}
.header_logo_sp {
	margin: 10px 0 0 5%;
}
.header_logo_sp img{
	width: 100%;
}
.sh1{
	margin-left: 20px;
	font-size: 0.8rem;	
}
/*nav*/
.drawer-navbar--fixed{position:fixed}
	
/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:70px;
  margin-top:-70px;
}
	
.header_sub_h1 img{
	width: 130px;
}

.rainbow{
		font-size: 1.5rem;
	}
	
.top_slider_man_button{
	bottom: 0;
}

/* スライダー */

.top_slider_man{
	padding:0;
	width: 100%;
}

.top_slider_woman{
	padding: 0;
	width: 100%;
}
	
.top_slider_man h2,
.top_slider_woman h2{
		margin: 0 0 20px;
	}
	
/* footer*/

	
/*ハンバーガー*/

.rogo_w_h{
	position:relative;
	width:45px;
	height:auto;
	margin:10px 7%;;
	}

.rogo_w_h a:hover{
	opacity: 0.7;
  filter: alpha(opacity=80);
  -moz-opacity: 0.7;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.img_rogo{
	display: block;
	position:absolute;
	width:100%;
	height:auto;
	z-index:5;
	}

#nav_b{
	position:fixed;
	top:0;
	width:100%;
	height:55px;
	background:#fff;
	z-index:2;
	}

.global-nav {
	width:100%;
	height: 600px;
	margin:-18px auto 0;
    text-align: center;
	position: fixed;
    top: 50px;
	z-index: 99;
}
.global-nav .nav-item {
  display: inline-block;
  margin: 0 10px;
}
.global-nav .nav-item a {
  display: inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 8px;
  color: #000;
  font-size: 1.3rem;
  letter-spacing: 1px;
  transition: 0.15s;
	text-decoration:none;
}

.global-nav .nav-item a:hover {
  color:#005baa;
}

.global-nav-ul{
	padding: 0;
}

/* --------------------------------
 * 実績（performance）
 * -------------------------------- */
#performance{
	margin: 0;
}
/* --------------------------------
 * content
 * -------------------------------- */
.content{
	margin:0;
}

.content_box{
	margin: 80px 0;
}

.box{
	display: block;
	width: 90%;
}	
	
.flex_b{
	padding: 20px;
	width: 100%;
	letter-spacing:0.3rem;
	font-size: 1.8rem;
}
.flex_box_l{
	width: 100%;
}

.flex_box_2{
	width: 100%;
	font-size: 1.5rem;
}

.flex_box_3{
	width: 100%;
}
	
/*footer*/
.footer_nav{
	display: block !important;
}

.footer_box ul li{
	margin: 20px 0 20px;
}

.logo_poz {
    left: 65%;
	}

.footer_box {
    bottom: 110px;
    margin-bottom: -110px;
	}

/*メディアクエリーのケツ*/	
}


/* --------------------------------
 * TOPスライダー
 * -------------------------------- */

.img-frame{
   position: relative;
   width: 100%;
   height: 200px;
   overflow: hidden;
   margin: 0 auto;
}

.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image:url("../images/top_1.jpg");
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url("../images/top_2.jpg");
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url("../images/top_3.jpg");
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}