@charset "UTF-8";

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

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


body{
	width: 100%;
	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-weight: 100;
}

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

.header-f {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s 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);
}


/* --------------------------------
 * グラーデーション
 * -------------------------------- */
.rainbow{
  color: #010101;/*非対応のブラウザでの文字色を設定*/
  background: -webkit-linear-gradient(45deg, #00a0e8, #152a8c, #00a0e8, #152a8c);/*背景色にグラデーションを指定*/
  -webkit-background-clip: text;/*テキストでくり抜く*/
  -webkit-text-fill-color: transparent;/*くり抜いた部分は背景を表示*/
	background-size: 500% 500%;
	animation: AnimationName 10s ease infinite;
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}


/* --------------------------------
 * header
 * -------------------------------- */
.header{
  padding: 200px 0 0;
}

.header_logo {
	margin: 50px 10% 0;
}
.header_logo img{
	width: 100px;
}

.headerLogo{
	top: 20%;
}
.headerLogo img{
	width: 180px;
}

/* --------------------------------
 * 実績（performance）
 * -------------------------------- */
#performance{
	padding: 150px 0 0;
	width: 100%;
	background: #f7fbfd;
}


.performance_text{
	margin: 0;
	text-align: center;
	letter-spacing:0.5rem;
	font-size: 3rem;
	font-weight:500;
}

.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;
}




/* --------------------------------
 * content
 * -------------------------------- */
.content{
	padding: 50px 0;
	background: #f7fbfd;
	margin-bottom: 100px
}

.content_box1{
	margin: 100px 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: 90%;
	display: flex;
	margin: 0 auto;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.1);
}


.flex_b{
	margin: 0 auto;
	padding:0 20px;
	width: 60%;
	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%;
	display: flex;
	border-bottom: 1px #CFCECE solid;
}

.flex_m{
	margin: 0 0 20px;
}

.flex_box_l{
	width: 35%;
	text-align: left;
}

.flex_box_2{
	width: 65%;
	text-align: left;
}

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

.flex_box_3 img{
	width: 100%;
}

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



/* --------------------------------
 * メディアクエリー
 * -------------------------------- */
@media screen and (max-width: 768px) {
	
	/* --------------------------------
 * header_sub
 * -------------------------------- */
main{
		margin-top: 30px;
	}
	
/*nav*/
.drawer-navbar--fixed{position:fixed}
	
/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:70px;
  margin-top:-70px;
}
	
.header_sub_h1 img{
	width: 130px;
}
.headerLogo{
	top: 16%;
}
.headerLogo img{
	width: 50%;
}
.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*/

	
#performance{
	padding: 80px 0 0;
}
/* --------------------------------
 * content
 * -------------------------------- */
.content{
	margin: 0;
}

.content_box1{
	margin:0;
}
.content_box{
	margin: 80px 0;
}

.box{
	display: block;
}	
	
.flex_b{
	padding:20px 20px 0;
	width: 100%;
	letter-spacing:0.3rem;
	font-size: 1.8rem;
}
.flex_box{
	margin: 0 0 20px;
	display:inline-block;
}
.flex_box_l{
	width: 100%;
	font-size: 1.8rem;
    font-weight: bold;
}

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

.flex_box_3{
	width: 100%;
}
	
/*footer*/
.footer{
	margin-top: 60px ;
	padding: 80px 0 100px;
}


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