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



h2 {
	margin-bottom:20px;
}

h3 {
	margin-bottom:20px;
}






/*=====#main_visual=====*/

.main_visual {
	margin:0 auto 60px;
}

/*=====#introduction=====*/

#introduction {
	margin-bottom:80px;
}

.introduction_01 {
	overflow:hidden;
}

#introduction h2{
	text-align:center;
	font-size:20px;
	color:#fff;
	padding:10px 20px;
  background-image: 	background: #1751c7; /* Old browsers */
	background: -moz-linear-gradient(left, #1751c7 0%, #5aacf8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #1751c7 0%,#5aacf8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #1751c7 0%,#5aacf8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1751c7', endColorstr='#5aacf8',GradientType=1 ); /* IE6-9 */
	margin-bottom:0px;
	opacity:0.8;
}


#introduction .text_box{
	width:calc(100% - 40px);
	max-width:400px;
	margin:0 auto 30px;
}

.introduction_01,.introduction_02,.introduction_03 {
	margin-bottom:60px;
}

#introduction .bg_uniform{
	background:url(../img/top/ss_uniform_img.jpg) no-repeat top right;
	background-size:cover;
	padding:30px 0 40px;
	color:#222;
}

#introduction .introduction_01 .text_box {
	background:rgba(250,250,255,0.4);
	box-shadow:0 0 20px rgba(0,0,0,0.1);
	margin:0 auto 20px;
	padding:20px;
	border-radius:5px;
}


#introduction h3{
	text-align:center;
	font-size:18px;
	padding-bottom:5px;
	margin:0 20px 10px;
	border-bottom:1px solid #46aaf8;
}


/*=====#top_promise=====*/

#top_promise h2 {
	text-align:center;
	font-size:22px;
	color:#fff;
	padding:30px 15px 15px;
	text-shadow:0 0 20px rgba(0,75,187,0.5);
	margin-bottom:10px;
}

.top_promise_intro {
	padding-bottom:40px;
	background:url(../img/top/ss_sky_tshirt.jpg) center bottom;
	background-size:cover;
}

.promise_circles {
	width:100%;
	max-width:500px;
	margin:0 auto;
	
	  display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;

		-ms-flex-pack: distribute;	
	justify-content:space-around;

  	-ms-flex-wrap: wrap;	
	flex-wrap:wrap;
}
	
.top_promise_intro a{
	display:block;
	border-radius:50%;
	width:140px;
	height:140px;
	color:#fff;
	margin-bottom:5px;
	font-size:16px;
	background:rgba(57,149,235,0.3);
	box-shadow:0 0 20px rgba(0,75,187,0.5);
	
	  display:-webkit-box;
  	display:-ms-flexbox;	
	display:flex;

  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;	
	flex-direction:column;

		-webkit-box-align: center;
		-ms-flex-align: center;	
	align-items:center;

		-webkit-box-pack: justify;
		-ms-flex-pack: justify;	
	justify-content:center;
}

.top_promise_intro i {
	font-size:32px;
	margin-bottom:10px;
}

.top_promise_intro li:last-of-type{
	margin-bottom:20px;
}

.promise_circles.delighter li {
	opacity: 0;
		-webkit-transform: translatey(40%);
	  -ms-transform: translatey(40%);
	transform: translatey(40%);
		-webkit-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.promise_circles.delighter.started li { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; }
.promise_circles.delighter.started li:nth-child(1) { -webkit-transition: all .7s ease-out .1s; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s; }
.promise_circles.delighter.started li:nth-child(2) { -webkit-transition: all .7s ease-out .3s; -o-transition: all .7s ease-out .3s; transition: all .7s ease-out .3s; }
.promise_circles.delighter.started li:nth-child(3) { -webkit-transition: all .7s ease-out .5s; -o-transition: all .7s ease-out .5s; transition: all .7s ease-out .5s; }

.top_promise_intro .text{
	text-align:center;
	font-size:14px;
	color:#fff;
	text-shadow:0 0 15px rgba(0,75,187,0.9);
}

.top_promise_list {
	width:100vw;
	overflow:hidden;
	background: -moz-linear-gradient(top, rgba(150,198,242,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(150,198,242,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(150,198,242,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96c6f2', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.top_promise_list div{
	width:100vw;
	max-width:400px;
	height:50vw;
	max-height:200px;
	padding:20px;
	margin:0 auto;
	color:#fff;
	text-shadow:0 0 5px #10438f;
}

.top_promise_list h3 {
	font-size:23px;
}

.top_promise_list p {
	font-size:14px;
}

#top_network{
	background:url(../img/top/ss_top_network.jpg);
	background-size:cover;
}

#top_delivery{
	text-align:right;
	background:url(../img/top/ss_top_delivery.png);
	background-size:cover;
}

#top_eco{
	background:url(../img/top/ss_top_eco.jpg);
	background-size:cover;
}


/* 基本のスタイル */
#top_network.delighter,#top_eco.delighter{
			-webkit-transition: all .4s ease-out;
			-o-transition: all .4s ease-out;
		transition: all .4s ease-out;
			
			-webkit-transform: translateX(100%);
			-ms-transform: translateX(100%);
    transform: translateX(100%);
			
      opacity: 0;
}

 #top_delivery.delighter{
      -webkit-transition: all .4s ease-out;
			-o-transition: all .4s ease-out;
		transition: all .4s ease-out;
			
				-webkit-transform:translateX(-100%);
				-ms-transform: translateX(-100%);
    transform: translateX(-100%);
			
      opacity: 0;
   }
 
/* スタート時のスタイル */
#top_network.delighter.started,#top_delivery.delighter.started,#top_eco.delighter.started {
				-webkit-transform:none;
				-ms-transform: none;
      transform: none;
      opacity: 1;
   }

#top_promise {
	margin-bottom:0px;
}


/*=====#top_q_and_a=====*/

#top_q_and_a{
	background:#f7f5f4;
	padding:60px 0 80px;
	margin-bottom:0;
}

#top_q_and_a *{
	color:rgba(0,0,0,0.8);
}

.top_questions {
	text-align:center;
}

.top_questions p {
  position: relative;
  display: block;
  padding: 10px 12px;
  min-width: 120px;
  max-width: 75%;
  font-size: 16px;
  background: #ffdeda;
	border-radius:15px;
	box-shadow:2px 2px 5px rgba(0,0,0,0.1);
	text-align:left;
}

.top_questions .delighter{
	 opacity: 0;
	 
	 			-webkit-transform: translatey(40%);
				-ms-transform: translatey(40%);
	 transform: translatey(40%);
	 
	 -webkit-transition: all 1s ease-out;
	 -o-transition: all 1s ease-out;
	 transition: all 1s ease-out;
}

.top_questions .delighter.started{
	opacity:1;
	 			-webkit-transform:none;
				-ms-transform:none;
	transform: none;
}

.top_questions p::before{
	content:"";
	position:absolute;
	top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffdeda;
}

.top_questions a:nth-of-type(odd) p{
	margin:0 auto 30px 0;
}

.top_questions a:nth-of-type(even) p{
	margin:0 0 30px auto;
}

.top_questions a:last-of-type p{
	margin-bottom:40px;
	text-align:center;
}

.hatena_man {
	text-align:center;
	width:200px;
	height:auto;
}

#top_q_and_a .top_q_arrow {
	text-align:center;
	font-size:20px;
	padding-top:30px;
}

.consultation {
	width:80%;
	margin:20px auto 40px;
	padding:10px 20px 15px;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	background:rgba(255,255,255,0.8);
	box-shadow:0 0 10px rgba(255,168,159,0.3);
	border-radius:10px;
}

#top_q_and_a .shooting_star::before{
	color:#ffa89f;
  text-shadow:0 0 10px #fff;
	margin-left:-1em;
}

#top_q_and_a .details {
	margin-bottom:20px;
	text-align:center;
}

#top_q_and_a .details a{
	background:#fff;
	margin-right:0;
	border:2px solid #ffa89f;
}

#top_q_and_a .details a::before{
	color:#ff6f63;
}

#top_q_and_a .flex {
  	display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;
	
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
	justify-content:space-between;
	align-items:flex-start;
}

#top_q_and_a .flex .btn {
	background:#fff;
	border-radius:10px;
	border:2px solid #ffa89f;
	width:calc((100% - 10px)/ 2);
	padding:15px 10px;
	text-align:center;
}

#top_q_and_a .flex .btn i {
	margin-right:5px;
	margin-left:-10px;
	color:#ff6f63;
}

#top_q_and_a .flex .btn .tel_number {
	color:#ff6f63;
	font-weight:bold;
}


/*=====#top_hope=====*/

#top_hope {
	background:url(../img/top/ss_skyblue_shirt.jpg);
	background-size:cover;
	width:100%;
	padding:100px 0;
	position:relative;
	margin-bottom:40px;
}

#top_hope h2{
	font-family: 'Nothing You Could Do', cursive;
	font-size:36px;
	position:absolute;
	text-align:center;
	top:70px;
	left:0;
	right:0;
	color:#659fe6;
}

#top_hope .text{
	padding:40px 20px 20px;
	background:rgba(253,253,255,0.4);
	box-shadow:0 0 15px rgba(0,25,50,0.1);
	border-radius:5px;
	width:calc(100% - 40px);
	max-width:400px;
	margin:0 auto;
	color:#222;
}

#top_hope .text p{
	margin-bottom:20px;
}


/*=====#top_news=====*/

#top_news {
	overflow:hidden;
	padding-bottom:50px;
	margin-bottom:0;
}

#top_news h2{
	font-size:20px;
	text-align:center;
 background-image: 	background: #1751c7; /* Old browsers */
	background: -moz-linear-gradient(left, #1751c7 0%, #5aacf8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #1751c7 0%,#5aacf8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #1751c7 0%,#5aacf8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1751c7', endColorstr='#5aacf8',GradientType=1 ); /* IE6-9 */
padding:10px 0;
color:#fff;
font-weight:normal;
}
 
#top_news .details {
	margin:0 10px;
}
 
.top_news_box {
	width:calc(100% - 20px);
	margin:0 auto;
	padding:40px 0 20px;
}

.top_news_box dl {}

.top_news_box dl dt {
	font-family:'Roboto Condensed', sans-serif;
	font-weight:bold;
	font-size:20px;
	letter-spacing:0.1em;
	background:rgba(0,100,202,0.6);
	border-radius:10px 10px 0 0;
	color:#fff;
	padding:5px 5px 2px;
	display:block;
	width:45%;
	margin:0 auto 0 0;
	text-align:center;
	box-shadow:0 0 10px rgba(0,100,202,0.2);
}

.top_news_box dl a:first-child dt{
	font-size:2em;
	width:100%;
	background:rgba(0,100,202,0.8);
	box-shadow:0 0 15px rgba(0,100,202,0.3);
}

.top_news_box dl a:first-of-type dt::after {
	font-family: "Font Awesome 5 Free";
  content: '\f4ad';
	display:inline-block;
  font-weight: 400;
	margin-left:10px;
	font-size:0.8em;
	vertical-align:top;
}

.top_news_box dl dd{
	padding:20px;
	color:#37538d;
	background:#fff;
	border-radius:0 10px 10px 10px;
	box-shadow:0 0 10px rgba(0,100,202,0.2);
	margin-bottom:20px;
	
	 	display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;
	
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
	justify-content:space-between;

		-webkit-box-align: center;
		-ms-flex-align: center;	
	align-items:center;

}

.top_news_box dl dd::after{
	content:"";
	border-bottom:2px solid #5aacf8;
	border-right:2px solid #5aacf8;
	padding:5px 5px;
	margin-left:15px;
	margin-right:5px;
	
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	transform:rotate(-45deg);
}

.top_news_box dl a:first-of-type dd {
	font-size:1.3rem;
	margin-bottom:40px;
	box-shadow:0 0 15px rgba(0,100,202,0.3);
	border-radius:0 0px 10px 10px;
}

.top_news_box dl a:nth-of-type(4) dd {
	margin-bottom:30px;
}

.top_news_more {
	text-align:center;
	display:block;
	vertical-align:middle;
	background:#fff;
	border-radius:50%;
	width:75px;
	height:75px;
	margin:0 auto;
	box-shadow:0 0 10px rgba(0,100,202,0.2);
}

.top_news_more i {
	font-size:20px;
	color:#5aacf8;
	padding-top:15px;
}


main{
	margin-bottom:0;
}