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

@keyframes wave{
	0%{background-position:left top;}
	100%{background-position:40px top;}
}

@keyframes char_b_r{
	0%{transform:rotate(-15deg);}
	25%{transform:rotate(0deg);}
	100%{transform:rotate(0deg);}
}




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

img{
  vertical-align: bottom;
}

a{
    color:#fff;
}

body{
	font-size:14px;
	line-height:2;
	color:#fff;
	font-family:'M PLUS Rounded 1c',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	background:rgba(41,115,142,1);
}

#wrapper, header, nav, main, footer{
	width:100%;
	margin:0 auto;
}

#wrapper{
    width:100vw;
}

#top_img{
    height:100%;
    margin:auto auto auto -200px;
    position:fixed;
    z-index:-1;
    top:0;
}

header, main, footer{
    z-index:2;
}

header{
    text-align:center;
    margin-top:5vh;
}

header small{
    font-size:12px;
    padding:0 auto;
    letter-spacing: 8px;
}

header h1{
    line-height: 1.5;
    letter-spacing: 10px;
}

header h1{
    font-size:36px;
    font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}

header h2{
    font-size:16px;
    margin:15vh auto;
    letter-spacing: 8px;
}

nav ul li{
	float:left;
	margin:0 auto;
	box-sizing:border-box;
	width:50%;
    padding:2px;
}

nav ul li:last-child{
	border:none;
}

nav ul li a{
	text-decoration:none;
	color:#fff;
	display:block;
	line-height:60px;
	text-align:center;
	padding:2px;
	background:rgba(41,115,142,0.8);	
    box-sizing:border-box;
	cursor:pointer;
    letter-spacing: 5px;
}
.top_chara{
    margin:30px auto;
}


.sankai_chara{
    height:auto;
    width:100%;
}

.san{
    float:left;
    width:40%;
    margin-left:20px;
}

.kai{
    float:right;
    width:40%;
    margin-right:20px;
}

.char_b_1, .char_b_2{
	animation:char_b_r 3s steps(2,start) infinite;
}

.char_b_2{
	animation-delay:0.5s;
}

main{
    background: rgba(41,115,142,0.8);
}

article{
    padding:30px 20px 30px;;
}

article h1{
    text-align: center;
    font-size:24px;
    line-height:3.5;
    font-weight:bold;
    letter-spacing: 5px;
	animation:wave 2s ease-in-out infinite;
}

article > h1{
    background:url("../img/wave.png");
}

article p{
    margin-bottom:10px;
}

.c_bx{
    padding:20px 15px 50px;
    background-color: #fff;
    color: #000;
    width:80%;
    border-radius:10px;
    display:block;
}

.right{
    float:right;
}

.left{
    float:left;
}

.cm_img{
    width:40%;
}

.cm_img img{
    width:100%;
    height:auto;
}

.cm{
    width: 55%;
}

.ch{
    height:auto;
    width:150px;
    margin:-70px auto 50px;
}

.ch img{
    width:100%;
    height:auto;
}

span{
    display: block;
    margin-bottom:10px;
}

article h2{
    font-size:18px;
    line-height: 3;
    font-weight:bold;
}

article h3{
    font-size:16px;
    line-height: 3;
    font-weight:bold;
}

article small{
	font-size:14px;
}

.goods{
    background-color:rgba(253,247,227,0.9);
    padding:20px;
    margin:20px auto;
    color:#333;
}

.goods h1{
    font-size:16px;
    line-height: 3;
    color:#333;
}

.goods img{
    width:100%;
    height:auto;
}

dl{
    margin:30px auto 10px;
    color:#333;
}
dd{
    margin-left:4em;
    margin-top: -2em;
}



.price{
    font-size:18px;
    display:inline;
}

.adjust{
    margin-top:-2.5em;
}

.contact_link a{
    text-align:center;
    display: block;
    font-size:22px;
    margin:20px auto;
}

.contact img{
    width:100%;
    height:auto;
}

.contact_img{
    width:40%;
}

.about_sankai dl{
    margin-top: 0px;
    color:#fff;
}

.president{
    text-align:right;
}

footer{
    background-color: rgba(62,80,77,1);
    font-size:12px;
    text-align:center;
    line-height:3;
}

.buy_btn a{
  display:block;
  margin: 20px auto;
  width:200px;
  height:30px;
  border-radius:15px;
  cursor: pointer;
  color:#fff;
  border-style: none;
  background:linear-gradient(#29738E,#29738E);
  text-decoration:none;
  text-align: center;
}



/*--お問い合わせ対応--*/

.bg_contact{
        background-color:rgba(253,247,227,0.9);
    padding:20px;
    margin:20px auto;
    color:#333;
}

.bg_contact h1{
    background-image: none;
}
#fm_contact header h2{
    width:90%;
    text-align:left;
    margin:0 auto;
}
#fm_contact header h2 a{
    text-decoration: none;
}

#fm_contact header{
    text-align:center;
    margin-top:0;
}

header h1{
    line-height: 1.5;
    letter-spacing: 10px;
}

#fm_contact header h1{
    font-size:24px;
    font-family:inherit;
    margin:40px auto;
}

#fm_contact header h2{
    font-size:16px;
    margin:20px auto;
    letter-spacing: 8px;
}

#fm_contact dt{
    margin-top:10px;
}

#fm_contact dd{
    margin-left:0;
    margin-top: 0;
}

#fm_contact .box{
    margin-left:0;
}

input, .input_box{
    font-size:14px;
}
.confirm_btn{
      margin-top:30px;
  display:block;
  margin: 60px auto 0;
  width:200px;
  height:30px;
  border-radius:15px;
  cursor: pointer;
  color:#fff;
  border-style: none;
  background:linear-gradient(#29738E,#29738E);
}

textarea{
	width:100%;
}

.address{
	width:100%;
}


/*--プレビュー--*/
.btns{
	text-align: center;
	margin:0 auto;
}

.send_btn, .back_btn{
      margin-top:30px;
  width:200px;
  height:30px;
  border-radius:15px;
  cursor: pointer;
  border-style: none;
}

.back_btn{
    background:linear-gradient(#fff,#fff);
}

.send_btn{
	margin-left:0px;
	background:linear-gradient(#29738E,#29738E);
	color:#fff;
}

.tamanegi_gori img{
    margin:20px auto;
    width:100%;
    height:auto;
}

table{
    font-size:12px;
   text-align: center; 
    margin:0 auto;
    overflow: scroll;
}

thead{
    background:#dddddd;
    font-size:12px;
}

td.weight{
    background:#dddddd;
}
tr{
    text-align: center;
}

tbody tr td{
    background: #fff;
}

td{
    padding:5px 3px;
    min-height: 6em;
  vertical-align: middle;
}

td span{
        writing-mode:vertical-rl;
        
}

.recipe img{
	display: inline-block;
	width:45%;
	height:auto;
	margin-right:10%;
	margin-bottom: 10px;
}

.recipe img:nth-child(2n){
	margin-right:0;		
}


/*--レスポンシブル対応--*/
@media screen and (min-width:500px){
body{
    font-size:16px;
}

nav ul li{
    width:25%;
    padding:1px;
}
    
.san, .kai{
    width:180px;
    margin:-400px 30px auto;
}

article{
    width:90%;
    margin:0 auto;
}

.c_bx{
    width:60%;
    margin-top:50px;
}
.cm_img{
    width:35%;
}

.goods h1{
    font-size:18px;
}

.goods{
    width:60%;
}

.price{
    font-size:20px;
}

.adjust{
    margin-top:-2.4em;
}


.contact_img{
    width:20%;
}

/*--お問い合わせ対応--*/

.bg_contact{
    width:80%;
        background-color:rgba(253,247,227,0.9);
    padding:20px;
    margin:20px auto;
    color:#333;
}


#fm_contact header h2{
    width:70%;
    text-align:left;
    margin:0 auto;
}

#fm_contact dd{
    margin-left:13em;
    margin-top: -2em;
}

#fm_contact .box{
    margin-left:5em;
}

textarea{
	width:70%;		
}
.address{
	width:90%;
}
.send_btn{
	margin-left:30px;
}
.tamanegi_gori img{
    width:300px;
    height:auto;
}

table{
    font-size:14px;
}

td{
    padding:5px 5px;
    min-height: 5em;
}

td span{
        writing-mode:horizontal-tb;
        vertical-align: middle;
}
	
.recipe img:nth-child(2n){
	margin-right:5%;		
}

.recipe img{
	width:30%;
	margin-right:5%;
}

.recipe img:nth-child(3n+1){
	margin-right:0;		
}
	
}

@media screen and (min-width:770px){
article{
    width:70%;
    margin:0 auto;
}

#fm_contact header h2{
    width:50%;
}



}