@charset "UTF-8";
/*
Theme Name: Musashino Udon
Author: Ducca Corp.
Description: Musashino Udon iwai theme
Version: 1.0
*/

*{
 margin: 0;
 padding: 0;
}

body{
word-wrap: break-word;
letter-spacing: 0.1em;
height: 100%;

background: #F1F0EB;
}




html {
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-family: 'Noto Serif JP', serif;
  font-size : 100%;
  line-height : 1.5;
   height: 100%;

}

h1,h2,h3,h4,h5,h6 {
 margin-bottom : 1em;
}

h1 {
font-size : 36px; 
line-height : 1.2;
} /* 48px */

h2 {
font-size : 32px;
line-height : 1.6em;
font-weight: normal;
letter-spacing: 0.2em;
} /* 48px */

h3 {
font-size : 24px;
line-height : 1.2;
font-weight: normal;
} /* 24px */



ul, ol {
	  list-style : none;
	  }
img { 
         vertical-align : middle;
         max-width: 100%;
         height: auto;
         }

p{
    line-height: 2em;
    margin-bottom: 2em;
}


figure{
margin-bottom: 2em;
}


a{
color: #2b2b2b;
 text-decoration: none;
 transition: 0.4s ease-in-out;  
}

a:hover {  
    opacity: 0.5;  
    filter: alpha(opacity=60);  
} 


/* text */

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.center{
 text-align: center;
}

.bold{
 font-weight: bold;
}


.small{
 font-weight: normal;
 font-size: 0.8em;
}

.big{
 font-weight: bold;
 font-size: 1.3em;
}


.container{
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
}



/*header*/

.header_top{
background-image: url(./images/bg_header_sp.jpg);
background-size: cover;
background-repeat:no-repeat ;
background-position: top right;
padding-top: 10em;
padding-bottom: 15em;
color: #fff;
}

.header_top h1{
max-width: 250px;
margin-left: auto;
margin-right: auto;
  animation: fadeIn 4s cubic-bezier(0.8, 1, 0.68, 1) 1 forwards;
}

header p.catch_top{
font-size: 1em;
text-align:center;
}

.sns ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 999;
flex-wrap: wrap;
max-width: 200px;
position: fixed;
top: 1em;
left: 1em;
}

.sns li{
width: 27%;
margin: 3%;
}

/*youtube*/
 
 .youtube iframe{
  width: 100%;

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

}


/*flex*/

.flex_container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.flex_center{
 justify-content: center;
  align-items: center;
}

.flex_box_half{
width: 48%;
margin: 1%;
}


/*main*/

.box{
padding: 3em 1em 3em 1em;
}


.box p.catch{
font-size: 1.4em;
text-align: center;
}

.box h2{
text-align: center;
font-size: 1.4em;
}

.box h2:before{
    content: "";
    display: inline-block;
    background: url(./images/title_front.png) no-repeat;
    background-size: 2em 4em;
    width: 2em;
    height: 4em;
    vertical-align: middle;
}

.box h2:after{
    content: "";
    display: inline-block;
    background: url(./images/title_back.png) no-repeat;
    background-size: 2em 4em;
    width: 2em;
    height: 4em;
    vertical-align: middle;
}

.bg_main{
background-image: url(./images/bg_main_sp.jpg);
background-size: cover;
background-repeat:no-repeat ;
background-position:center center;
padding-top: 15em;
color: #fff;
}

.catch_box{
background: #000018;
text-align: center;
padding: 1em 1em 0em 1em;
max-width: 270px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 3em;
}

.catch_box p{
color: #fff;
font-size: 2em;
padding-bottom: 1em;
}
.box p.text_sp br{
display: none;
}


/*animation*/
.fade_off {
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

.fade_on {
    opacity: 1;
}

/*footer*/


footer {
background: #000018;
        padding-bottom: 4em;
color: #fff;
}

footer a{
color: #fff;
}



.footer_in{
padding-left: 1em;
padding-right: 1em;
}

p.copy{
text-align: center;
margin-top: 8em;
}




.wpcf7 textarea ,.wpcf7 input[type="text"],
.wpcf7 input[type="email"],.wpcf7{
width: 100%;
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
}

 input[type="tel"]{
      padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
 }

input[type="text"].p-postal-code{
    max-width: 120px;
}

input[type="text"].p-region{
    max-width: 280px;
}
input[type="text"].p-locality{
    max-width: 280px;
}



.wpcf7 textarea ,.wpcf7 input[type="text"],
.wpcf7 input[type="email"],.wpcf7 input[type="tel"]{
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
}


.wpcf7 select{
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
}


.wpcf7 input[type="submit"]
  {


padding: 1em 2em;
font-size: 14px;
border: none;
background-color: #000;
-webkit-appearance: none;
cursor: pointer;
border-radius: 3px;
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 5em;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.wpcf7 input[type="submit"]:hover{
  opacity: 0.8;
    filter: alpha(opacity=60);
  }

.wpcf7-list-item-label{
 margin-right: 15px;
}
.fb-page{
width: 100%!important;
}
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  



/*ページナビゲーション*/
.pagenav{
    margin-top: 3em;
    font-size: 0.9em;
    max-width: 400px;
    margin: 0 auto;
}

.pn_old{
border: 1px solid #000;
border-radius: 10px;
float: left;
text-align: center;
width: 100px;
margin-left: 0;
margin-right: auto;
}

.pn_new{
border: 1px solid #000;
border-radius: 10px;
float: right;
text-align: center;
width: 100px;
margin-left: auto;
margin-right: 0;
}


.pagination ul{
      display: -webkit-box;
  display: -ms-flexbox;
display: flex;
max-width: 350px;
margin: 0 auto;
}
.pagination li{

    font-size: 0.7em;
      flex: 1; 
      margin: 0.5em;
      margin-top: 5em;
      margin-bottom: 8em;
      background: #fff;
border-radius: 3px;
   padding: 0.8em;
}

.pagination li a{
    color: #fff;
}



/*外部コンテンツ*/
iframe	{max-width: 100%}


/* YouTubeのビデオ */
.ytvideo	{position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 30px}

.ytvideo iframe	{position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%}

/*googlemap*/

.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 36.25%;
position: relative;
margin-top: 2em;
margin-bottom: 2em;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

/*btn*/

.button{
  position: fixed;
  left: 50%;
transform: translate(-50%, 0%);
  bottom: 0;
  font-size:1em;
  color: #fff;
  background: #33AD37;
  padding: 0.3em 0.5em;
  cursor: pointer;
  transition: .3s;
margin-bottom: 0;
width:70%; 
text-align: center;
border-radius: 10px 10px 0px 0px;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}


@media screen and (min-width: 768px){

.center_pc{
 text-align: center;
}

    /*flex*/
.flex_container_pc{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.flex_re{
   display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex_center{
  justify-content: center; 
}
.flex_bottom{
align-items:flex-end;
}

.flex_box_pc{
width: 46%;
margin: 2%;
box-sizing: border-box;
}



 /*header*/
 .header_top{
background-image: url(./images/bg_header.jpg);
}
 
.header_top h1{
max-width: 400px;
}

header p.catch_top{
font-size: 2em;
text-align:center;
}

/*main*/
.box_lim{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

.box h2{
font-size: 2em;
}

.box p{
font-size: 1.2em;
}

.box p.catch{
font-size: 2em;
}



.box p.text_sp{
text-align: center;
}

.box p.text_sp br{
display: inline;
}

.bg_main{
background-image: url(./images/bg_main.jpg);
padding-top: 30em;
}

.catch_box{
background: #000018;
text-align: center;
padding: 4em 1em 0em 1em;
max-width: 570px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 3em;
left: 15%;
}


.catch_box p{
color: #fff;
font-size: 3em;
padding-bottom: 2em;
}

.box p.center_pc{
text-align: left;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

/*btn*/

.button{

  font-size:1.4em;
width:50%; 
}

/*youtube*/
 
  .youtube iframe{
      
        height: 600px;
  }
 
 .youtube_box{
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;

}
 

}

@media screen and (min-width: 1024px){

.box p.catch{
font-size: 2.5em;
text-align: center;
letter-spacing: 0.1em;
}

.box h2{
font-size: 2.7em;
}

.box p{
font-size: 1.3em;
}



.catch_box{

left: 20%;
}


}