@charset "utf-8";
/*初期設定*/
body{
  font-size:16px;
  color:#fff;
  background:#132a88;
  line-height:1.5;
  font-family: '游ゴシック体', '游ゴシック', YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
  box-sizing: border-box;
  max-width: 1980px;
  -webkit-text-size-adjust: 100%;
  text-size-ajust:100%;
}
img{
  vertical-align: bottom;
}
a{
  color:inherit;
  text-decoration: none;
}
input[type="text"],input[type="email"],input[type="tel"]{
  -webkit-appreance:none;
  -moz-appreance:none;
  apperance:none;
    border-radius: 0;
  border: 1px solid #bfbfbf;
    box-sizing: border-box;
  font-size:16px;
    font-family: inherit;
}
button{
    -webkit-appreance:none;
  -moz-appreance:none;
  apperance:none;
   border-radius: 0;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
}

button:focus,button:active{
  color:inherit!important;
}
textarea{
     -webkit-appreance:none;
  -moz-appreance:none;
  apperance:none;
    border-radius: 0;
  border:1px solid #bfbfbf;
    box-sizing: border-box;
  font-family: inherit;
  font-size:16px;
}
/*汎用クラス*/
.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;
} 
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
.wrapper{
  max-width:980px;
  width:90%;
	margin:0 auto;
}
.font{
  font-family: 'Josefin Sans', sans-serif;
}
.display_none{
  display:none!important;
}
/*header*/
header{
  width:100%;
  position: relative;
}
.header_content{
	display: flex;
	justify-content: space-between;
  max-width: 980px;
  width:90%;
  margin: 0 auto;
    position: relative;
    z-index: 1;
}

header::after{
	content:"";
	width:100%;
	height: 290px;
	position:absolute;
	background: #132a88;
	transform: skewY(-5deg);
	top:-140px;
	z-index:0;
	
}
.logo_area{
	width:106px;
	margin-top:20px;
}

.logo_area img{
	width:100%;
}

header nav ul{
	display: flex;
	width:650px;
	justify-content: space-between;
	margin-top:20px;
}
.iconlink{
	width:30px;
}

.navigation a{
	display:block;
	width:100px;
	text-align: center;
	position: relative;
}
.iconlink:hover{
	opacity: 0.8;
}
.navigation a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.navigation a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.navigation a:hover::after {
  transform: scale(1, 1);
}
.mobile_wrapper{
	display:none;
}
/*main_img*/
header+div{
  top:0!important;
}
.main_img{
	width:100%;
  height:750px;
  background:url(../img/top_main2.jpg);
	background-size:cover;
	background-repeat: no-repeat no-repeat;
	background-position:center;
	z-index: -10;
  top:0;
  left:0;
  overflow:hidden;
}

.catchcopy{
  display: block;
	 width:679px;
	height:149px;
  margin:0 auto;
padding-top:210px;
}
main{
	position:relative;
}
/*service*/
#service{
	background:#1652c0;
	position: relative;
	padding-bottom:200px;
}
#service::before{
	content:"";
	background:#1652c0;
	height:310px;
	width:100%;
	position: absolute;
	z-index: -1;
	transform: skewY(-5deg);
	top:-225px;
}

.content_title{
	font-size:60px;
  width:100%;
}
.service_content_expression{
  margin:-140px 0 80px 0;
}
.textshadow{
	text-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.service_title{
position: absolute;
top:-220px;
}

.service_content{
	padding: 20px;
	background:#313131;
	position: relative;
	margin-top:30px;
}

.middle_title{
	font-size:30px;
	font-weight: bold;
	margin-bottom:20px;
}
.content_area{
	padding-top:50px;
}
.morebutton_area{
	margin-top:30px;
	text-align: center;
}
.morebutton{
	text-align: left;
	display: inline-block;
	width:180px;
	background:#fff;
	color:#313131;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 5px;
	position: relative;
}
.morebutton:hover{
	opacity:0.8;
}
.down_arrow{
	border-top: 16px solid #313131;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
	position: absolute;
	top:15px;
	right: 20px;
	  margin-right:-0.3em;
}
.top_arrow{
    border-right: 12px solid transparent;
  border-bottom:16px solid #313131;
  border-left: 12px solid transparent;
  	position: absolute;
	top:15px;
	right: 20px;
}
.close_btn{
  display:none;
}
.contact_btn_area{
	margin-top:70px;
	text-align: center;
}
#moregoods{
  display:none;
}
#morephoto{
  display:none;
}
.contact_button{
	display: inline-block;
	margin-top:30px;
	padding:10px 0;
	font-size:30px;
	width:280px;
	border: 1px solid #fff ;
	border-radius:5px;
}
/*詳細説明*/
.small_title{
  font-size: 20px;
  font-weight: bold;
  margin-top:30px;
}
.more_content_area p{
  margin-top:20px;
}
.flow_content{
  width:100%;
display: table;
  border-bottom: 1px solid #fff;
  padding :30px 0;
}
.flow_number_area{
  display:table-cell;
  width:80px;
}
.flow_number{
  display: inline-block;
width:50px;
  height:50px;
  text-align: center;
  background: #fff;
  color:#313131;
  font-weight: bold;
  line-height: 50px;
}
.flow_text{
  display: table-cell;
  padding-right: 30px;
  vertical-align: top;
}
.flow_title{
  font-weight:bold;
  margin-bottom:5px;
}
.flow_pic{
  display: table-cell;
  vertical-align: middle;
  width:200px;
}
.flow_pic img{
  width:100%;
}
.today{
  text-align:center;
}
.today>p{
  margin-bottom:20px;
}
.white{
	border-top: 16px solid #fff;
position: static;
}
/*sns*/
#sns{
	background: #0c1747;
	position: relative;
  padding-bottom:60px;
}

#sns::before{
	content:"";
	background:#0c1747;
	height:320px;
	width:100%;
	position: absolute;
	z-index:0;
	transform: skewY(5deg);
	top:-160px;
}

#sns::after{
		content:"";
	background:#0c1747;
	height:200px;
	width:100%;
	position: absolute;
	z-index:1;
	transform: skewY(-5deg);
	bottom:-100px;
}
.sns_title{
	position:absolute;
	top:-115px;
}
.sns_content_expression{
  position:relative;
}
.sns_area{
	display: flex;
	justify-content:space-between;
	position: relative;
	margin-top:70px;
}
.instagram{
  position: relative;
  max-width:441px;
width:45%;
  z-index: 2;
}
.snscontent_title {
  width:250px;
  height:50px;
}
.snscontent_title img{
  width:100%;
  height: auto;
}
.facebook{
  position:relative;
  max-width:441px;
  width:45%;
  z-index:2;
  display: flex;
  flex-direction: column;
}
.facebook .fb-post {
  flex-grow: 1;
  width: 100%;
  position: relative;
}
  .fb-post,.fb-post span, .fb-post iframe {
      width: 100% !important;
      height: 100% !important;
	}
.snscontent_title{
	width:250px;
	margin: 0 auto 20px auto;
}
.snscontent_title:hover{
  opacity: 0.8;
}
.insta_area{
  box-sizing:border-box;
  padding:10px 10px 0 10px;
  background:#fff;
  min-height: 447px;
}
    #fb-root {
        display: none;
    }
.facebook_content{
  width:100%;
}

/*creator*/
#creator{
  position:relative;
	background-image: url(../img/creator_bg.jpg);
	background-size:cover;
	background-repeat: no-repeat no-repeat;
  background-attachment:fixed;
  padding: 150px 0 200px 0;
}
.creator_title{
  position: absolute;
	top:90px;
  z-index:1;
}
.creator_area{
	margin-top:150px;
	display: flex;
  flex-wrap: wrap;
	justify-content:space-between;
}
.creator_introduce{
max-width:441px;
  width:45%;
	background:#f2f2f2;
	padding:20px;
	color:#000;
	margin-bottom:50px;
	box-shadow:0 2px 8px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.creator_logo{
	width:30%;
	float: left;
}

.creator_logo img{
  width:100%;
}
.creator_profile{
	width:70%;
	padding-left:20px;
	box-sizing: border-box;
	float:right;

}
.creator_job{
padding:0 0 10px 0;
}

.creator_name{
	font-size:18px;
	font-weight: bold;
	margin-bottom:10px;
}
.creator_url{
	font-size:12px;
  text-decoration: underline;
}
.creator_top{
padding-bottom:20px;
}
.creator_expression{
	clear: both;
}
/*company*/
#company{
  position: relative;
  background:#383f51;
  padding-bottom: 250px;
}
#company::before{
	content:"";
	background:#383f51;
	height:250px;
	width:100%;
	position: absolute;
	z-index: 0;
	transform: skewY(-5deg);;
top:-125px;
}
.company_title{
  position: absolute;
top:-140px;
}

.company_info{
  position: relative;
 margin-top:80px;
}
.company_content_title{
  text-align: center;
  font-size:24px;
  font-weight: bold;
  margin-bottom:30px;
}
.company_content_expression{
position: relative;
}

.company_overview{
  width:560px;
  margin:30px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.company_overview dt{
  width:15%;
  font-weight: bold;
}

.company_overview dd{
  width:85%;
  padding-left:30px;
  box-sizing: border-box;
  margin-bottom:20px;
}

.googlemap{
  margin:50px auto;
  text-align: center;
}

#access{
  max-width:650px;
  width:100%;
  height:300px;
  margin:0 auto 20px auto;
  color:#000;
}
.googlemap p{
  vertical-align: middle;
}
.googlemap a:hover{
opacity: 0.8;
}
.google_icon{
  display: inline-block;
  width:20px;
  height:30px;
  background-image:url(../img/googlemap_icon.svg);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat no-repeat;
}
.suppliers{
  text-align:center;
  max-width:500px;
  margin:0 auto;
}
/*contact*/
#contact{
  position: relative;
  background:#0c1747;
  padding-bottom:150px;
}
#contact::before{
  	content:"";
	background:#0c1747;
	height:200px;
	width:100%;
	position: absolute;
	z-index: 0;
	transform: skewY(5deg);
top:-100px;
}

.contact_title{
  position: absolute;
top:-160px;
  z-index: 2;
}

.form_area{
  max-width:600px;
  width:80%;
  margin:10px auto 0 auto;
  display:flex;
  flex-wrap: wrap;
justify-content: space-between;
    position: relative;
  z-index: 2;
}
.form_title{
  display:inline-block;
  width:50%;
  margin-top: 30px;
  border-bottom: solid 1px #fff;
  font-weight: bold;
padding:11px 0;
}
.input_area{
  width:50%;
  padding:10px;
  box-sizing: border-box;
}
.contact_content_title{
display:inline-block;
  width:50%;
  font-weight: bold;
  vertical-align:top;
  padding-top:100px;
}
.input_contact_content{
width:50%;
  height: 200px;
  padding:10px;
    margin-top:30px;
}
.submit_btn_area{
  text-align: center;
  padding:100px 0 50px 0;
}
.submit_button{
  background: none;
  border:1px solid #fff!important;
  border-radius: 5px!important;
  font-size:20px;
  font-weight: bold;
  color:#fff;
}
/*form*/
input.myerror{
  background: rgba(255,165,167,1.00);
}
textarea.myerror{
   background: rgba(255,165,167,1.00);
}
div.myerror{
  font-weight: bold;
  color:#FF1115;
}
textarea+ div.myerror{
  margin-top:-100px;
}
/*sweet alert.js*/
.sweet-alert dl dt{
  font-weight: bold;
}
.sweet-alert dl dd{
  margin-bottom:20px;
  min-height: 1em;
}
.sweet-alert dl dd:empty{
  margin-bottom:20px;
}
.confirm{
  background: #5F7DFA!important;
}

.sweet-alert {
    box-sizing : border-box;
    max-height : 100% !important;
    overflow-y : auto !important;
    padding : 0 17px 17px !important;
}
.sweet-alert:before {
    content : "";
    display : block;
    height : 17px;
    width : 0;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden!important; 
}
/*footer*/
footer{
  position: relative;
  background: #132a88;
}

footer::before{
  content:"";
	background:#132a88;
	height:200px;
	width:100%;
	position: absolute;
	z-index: 0;
	transform: skewY(-5deg);
  top:-100px;
}
.footer_content_area{
  font-size:12px;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

footer ul{
  width:65%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer_title{
  font-size: 16px;
  margin-bottom:15px;
}
footer small{
  width:100%;
  padding:20px;
  text-align: center;
}
/*トップへ戻る*/
.go_top_icon{
  display: inline-block;
width:50px;
  height:50px;
  background-image: url(../img/go_top1.svg);
  background-repeat: no-repeat no-repeat;
  background-position:top;
}
.go_top{
  display: block;
  width: 70px;
  text-align: center;
  position: fixed;
  bottom:50px;
  right:30px;
  z-index: 30;
}
.go_top_icon:hover{
  background:url(../img/go_top2.svg);
}
/*responsive*/

@media screen and (min-width:768px){
  /*sweetalart.js*/
.sweet-alert dl dt{
  float: left;
width: 160px;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.sweet-alert dl dd{
  margin:0 0 20px 180px;
}
.sa-button-container{
  clear:left;
}
}

@media screen and (max-width:768px){
  body{
    line-height:1.8;
  }
  /*ハンバーガーメニュー部分*/
  .header_content{
    display: none;
  }
  .logo_area{
    width:60px;
		margin-top:10px;
	}
  .mobile_wrapper{
      display:block!important;
    width:90%;
    margin:0 auto;
      position: relative;
z-index:100;
  }
  #menu-cb{
  display: none;
  }
  #menu-icon{
    width:60px;
    height:60px;
    cursor: pointer;
	  position: fixed;
	  top:0;
    right: 0;
	  z-index: 300;
    background: #132a88;
    padding-top:10px;
    box-sizing: border-box;
  }
  .top, .middle, .bottom{
    display:block;
    width:40px;
    height:4px;
    border-radius:4px;
    background:#fff;
    margin:6px auto;
	  transition: all .4s;
  }
  .bottom{
    margin-bottom:0;
  }
  #hum-menu{
    width:100vw;
    height: 100%;
	  background:#132a88;
    text-align:center;
      overflow:hidden;
    position: fixed;
    top:0;
    right:0;
	  transform: translateX(105%);
       transition: .3s ease-in-out;
    line-height:15vh;
    z-index: 200;
  }
  .mobile_nav{
    height:15%;
  }
	.mobile_navlink{
		display:block;
	}
.service_nav{
      transform: translateX(105%);
       transition: .3s ease-in-out .3s;
  padding-top:12.5%;
  }
  .sns_nav{
      transform: translateX(105%);
       transition: .3s ease-in-out .4s;
  }
	.creator_nav{
		transform: translateX(105%);
       transition: .3s ease-in-out .5s;
	}
	.company_nav{
		transform: translateX(105%);
		transition: .3s ease-in-out .6s;
	}
	.contact_nav{
		transform: translateX(105%);
		transition:.3s ease-in-out .7s;
     padding-bottom:12.5%;
	}

.nav_open{
    transform: translateX(0%);
}
#menu-cb:checked~ #menu-icon .top{
	transform: translateY(6px) rotate(-45deg);
	}
	#menu-cb:checked~#menu-icon .middle{
	opacity:0; 
	}
	#menu-cb:checked~#menu-icon .bottom{
		 transform: translateY(-14px) rotate(45deg);
	}
	#menu-cb:checked~ #hum-menu{
		transform: translateX(0%);
		z-index:200;
	}
	/*topに戻るの不要*/
	.go_top{
		display: none!important;
	}
	/*header*/
	header::after{
	content:"";
	width:100%;
	height:135px;
	position:absolute;
	background: #132a88;
	transform: skewY(-5deg);
	top:-50px;
	z-index:1;
}
  /*main_img*/
  .main_img{
    height:520px;
  }
  .catchcopy{
    width:80%;
    position: absolute;
     height: auto;
    top:0px;
 left:50%;
    transform:translateX(-50%);
    padding-top:180px;
  }

  /*service*/
  .service_title{
    top:-260px;
    z-index:3;
  }
  .service_content_expression{
    margin-top:-180px;
    position: relative;
    z-index: 4;
  }
  .content_title{
    text-align: center;
    font-size:40px;
    padding-top:60px;
    margin-top: -60px;
  }
  .content_expression{
    text-align:center;
  }
  .middle_title{
    font-size:20px;
  }
  .service_content{
    margin-top:20px;
  }
  .small_title{
    font-size:16px;
  }
  #service::before{
    z-index:2!important;
  }
  #goods{
    position: relative;
    z-index:5;
  }
  /*sns*/
  .sns_title{
    text-align:center;
    top:-90px;
  }
  .sns_area{
    display:block;
  }
  .instagram{
    width:100%;
margin: 30px auto;
  }
  .insta_area{
    min-height:0;
  }
  .facebook{
    width: 100%;
margin:30px auto;
  }
  .facebook .fb-post,.facebook .fb-post span, .facebook iframe{
    height: 500px !important;
  }
  /*creator*/
  #creator{
    background-attachment:scroll;
  }
  .creator_title{
    top:70px;
  }
  .creator_area{
    display: block;
  }
  .creator_introduce{
 margin:30px auto;
    width:100%;
  }
  /*contact*/
  .contact_title{
    top:-120px;
  }
  .form_area{
    max-width: none;
  width:100%;
  }
  .form_title{
    width:100%;
    border-bottom:none;
    margin-bottom:0;
  }
  .contact_content_title{
  width:100%;
  font-weight: bold;
  margin-top:30px;
padding:11px 0;
}
  .input_contact_content{
        width:100%;
margin-top:0;
  }
  .input_area{
    width:100%;
  }
  .submit_btn_area{
    padding-top:0;
}

  textarea+div.myerror{
    margin-top:0;
  }
}
@media screen and (max-width:600px){
.flow_content{
  width:100%;
display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #fff;
  padding :30px 0;
  position:relative;
}
  .flow_number{
    position: absolute;
    top:30px;
  }
  .flow_title{
    margin-left:60px;
    white-space: nowrap;
  }
  .flow_expression{
    margin-top:30px;
  }
  .flow_text{
    margin-bottom: 10px;
    padding-right: 0;
  }
  .flow_number{
    margin-bottom: 10px;
  }
  .flow_pic {
    margin: auto;
  }
    .contact_button{
  width:100%;
}
  /*sns*/
  #sns .wrapper{
    width:100%;
  }
  /*creator*/
  .creator_logo{
    height:100px;
  }
  .creator_logo img{
    width:100%;
    max-width: 200px;
  }
  .creator_profile{
    padding-left:10px;
  }
  .creator_name{
    margin-bottom:20px;
  }
  /*company*/
  .company_title{
    top:-150px;
  }
  .company_content_title{
    font-size:18px;
  }
  .company_overview{
    width: 100%;
    font-size:14px;
  }
  .company_overview dt{
    width:30%;
  }
  .company_overview dd{
    padding-left:0;
    width:70%;
  }
  .googlemap{
    margin-left:-5%;
    margin-right:-5%;
  }
  #access{
    width:100%;
    height:200px;
  }
  .suppliers{
    font-size:14px;
    line-height:2;
  }
  /*footer*/
  .footer_logo{
    display: inline-block;
    width:100%;
  }
  .footer_logo>.logo_area{
    margin: -80px auto 50px auto;
  }
  footer ul{
    width:100%;
    justify-content: center;
    text-align: center;
  }
  
  footer ul li{
    width:100%;
    margin-bottom:30px;
  }
  .iconlink{
    margin:20px;
  }
}