@charset "utf-8";

/* リセットCSS部分ここから */
/* リセットCSS部分ここから */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* 本書サンプル用に以下のコードを追加しています。 */
ol, ul {
    list-style: none;
}
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}


/* リセットCSS部分ここまで */
/* リセットCSS部分ここまで */


nav ul {
    list-style:none;
}





/* スマホ向け：10px～ */
@media only screen and (min-width: 10px) {
body {
	width: 100%;
    margin:0px auto 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;}
    
    
        

a {color:#000;
	text-decoration:none;}
a:hover {
	color:darkgrey;
    text-decoration:none;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
/*背景画像の透明化の設定*/     
a:hover article {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";}   
    
    
img{width:100%;}    
    
 
    
    #wrapper{
    width:100%;
    background: url("../../images/sozai/126-02.jpg") ;
    background-size:100%;
    background-repeat:repeat;}    
    
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    width:100%;
    max-width: 600px;
    margin:0px auto;
    padding:10px 0 0 0px;
    }
header h1 {
    display: block;
	margin:0 auto 0; 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:350px;
    
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}


nav{ 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
    margin-bottom:20px;}
    
nav ul li {
  float: left;
  text-align: center;
  width: 31%;
  margin:1%;
  background: url("../../images/sozai/126-06.jpg") ;
  background-size:100%;
  background-repeat:repeat;}   
 nav ul li:first-child{
  width: 31%;
  height:50px;}
nav ul li:nth-child(2){
    width:32%;
    height:50px;}  
nav ul li:nth-child(3){
    width:31%;
    height:50px;}
nav ul li:nth-child(4){
    width:31%;
    height:50px;}
nav ul li:nth-child(5){
    width:32%;
    height:50px;}
nav ul li:nth-child(6){
        width: 31%;
        height:50px;}        
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
color:grey;
font-weight:bold;
background: url("../../images/sozai/126-01.jpg") ;
background-size:100%;
background-repeat:repeat;} 
    
    

/* コンテンツの全幅サイズの指定 */
#contents{width:90%;
   max-width: 600px;
   margin:0 auto 0px auto;}    
    

  
    
/* デートにおすすめのお店情報画像リスト */
    .dateRecommendedimg{width:100%;
                        padding:20px 0px;
                        text-align: center;}
    
    .dateRecommendedimg article{width:96%;
                        margin:20px auto 20px auto;
                        text-align: left;}
 

 /* 文字の枠線や影などのスタイルここから */
.dateRecommendedimg h7,.dateRecommendedimg h8,.dateRecommendedimg h6{
  width:100%;
  display     : inline-block;
  font-size   : 90%;
  font-weight : bold;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;}
    
h6{font-size:90%;}
 /* 文字の枠線や影などのスタイルここまで */
    
        
    
    
    
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo1{background-color: red;
               height:180px;
               background: url(../../images/tokyo/cafekaira6.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo1 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:white;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo1 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
    
    
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo2{background-color: red;
               height:180px;
               background: url(../../images/tokyo/hachigatunokujira.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo2 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo2 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
    
     /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo3{background-color: red;
               height:180px;
               background: url(../../images/tokyo/uraniwa.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo3 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo3 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
 
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo4{background-color: red;
               height:180px;
               background: url(../../images/tokyo/therallytable.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo4 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo4 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
 
  /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo5{background-color: red;
               height:180px;
               background: url(../../images/tokyo/nanaya.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo5 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo5 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
    
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    .dateinfo6{background-color: red;
               height:180px;
               background: url(../../images/tokyo/piyanee.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo6 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo6 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
   
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    /* 日本酒バルチンタラ */
    /* 日本酒バルチンタラ */
    
    .dateinfo9{background-color: red;
               height:180px;
               background: url(../../images/tokyo/chintara23.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo9 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo9 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
        
    
    
    
    
　　/* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    
    .dateinfo7{background-color: red;
               height:180px;
               background: url(../../images/tokyo/chintara23.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo7 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo7 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}
    
    
 /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    
    .dateinfo10{background-color: red;
               height:180px;
               background: url(../../images/tokyo/shibukao.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo10 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo10 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}    
    
    
    /* おすすめ店ボックス　背景画像の中央寄せ配置設定あり */
    
    .dateinfo11{background-color: red;
               height:180px;
               background: url(../../images/tokyo/zauo.jpg);
               background-size:100%;
                background-position: center;
               background-repeat:repeat;}
    
    .dateinfo11 .recoimg{width:100%;
                      padding:80px 15px 15px 15px;
                      color:black;
                      font-weight: bold;
                      font-size:90%;
                      line-height: 1.5;}
    
   .dateinfo11 .areaname{display: block;
                width:80%;
                text-align: right;
                padding: 10px 40px 10px 0;
                color:white;}   
  
    
   

    
 /*吹き出しトータルボックス */ 
    .girlsmessagebox{width:370px;margin-left: auto;margin-right: auto;margin-top: 30px;margin-bottom: 30px;height:300px;}
    
    
    
    /*吹き出し左人物　右吹き出しひとつめ */
    .leftman1{width:35%;
             height: 280px;
             margin-top: 5px;
             float:left;
             background: url("../../images/tokyo/AMERshibuyacandyiphoneimage3.png") ;
             background-size:100%;
             background-repeat:no-repeat;}
    
    .hukidashiright1{width:60%;
             height: 180px;
             float:left;
             background: url("../../images/sozai/099-08yoko.png") ;
             background-size:100%;
             background-repeat:no-repeat;
             font-size: 13px;}
    
    .hukidashiright1 p{padding:40px 23px 40px 30px;
                 line-height: 2.0;
                 font-weight: bold;}
        
            
    

   
    
    
    
    
    
    
    
    
    
  
 /* ラインメッセージのスタイルここから */  
    #linetotalbox{width:100%;}
    .linemessagebox{max-width: 600px;
                    margin:0 auto;
                    line-height: 1.7;}
    
    
    
  .oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1024px;
  margin: 50px auto;
  padding: 0 10px;
}
.oneArea .onebox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.oneArea .onebox:nth-child(even) {
  flex-direction: row-reverse;
  margin-top: 20px;
}
.oneArea .onebox .imgArea {
  width: 16%;
  position: relative;
}
.oneArea .onebox .imgArea img {
  width: 100%;
  max-width: 130px;
  position: absolute;
  top: 0;
}
.oneArea .onebox:nth-child(odd) .imgArea img {
  left: 0;
  padding-right: 30px;
}
.oneArea .onebox:nth-child(even) .imgArea img {
  right: 0;
  padding-left: 30px;
}
.oneArea .onebox .fukiArea {
  width: 63%;
}
.oneArea .onebox .fukidasi {
  width: 100%;
  position: relative;
  padding: 25px;
  background-color: #f2f3f7;
  font-size: 18px;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
}
.oneArea .onebox .fukidasi::before {
  content: '';
  position: absolute;
  display: block;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 30px 15px 0;
  border-color: transparent #f2f3f7 transparent transparent;
}
.oneArea .onebox:nth-child(odd) .fukidasi::before {
  left: -20px;
}
.oneArea .onebox:nth-child(even) .fukidasi {
  background-color: #fde5e5;
}
.oneArea .onebox:nth-child(even) .fukidasi::before {
  right: -20px;
  border-color: transparent #fde5e5 transparent transparent;
  transform: rotate(180deg);
}
@media screen and (max-width: 1024px) {
  .oneArea .onebox .imgArea img {
    max-width: 70%;
  }
  .oneArea .onebox .fukidasi {
    padding: 15px;
    font-size: 14px;
  }
  .oneArea .onebox .fukidasi::before {
    top: 8px;
  }
}
@media screen and (max-width: 420px) {
  .oneArea {
    margin: 30px auto;
  }
  .oneArea .onebox:nth-child(even) {
    margin-top: 15px;
  }
  .oneArea .onebox .imgArea {
    width: 20%;
  }
  .oneArea .onebox .fukidasi {
    padding: 10px 15px;
    font-size: 12px;
  }
}
/* ラインメッセージのスタイルここまで */  

    .wakuTVgirlsstation{
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
        width:100%;
        max-width: 500px;
        height:350px;
        padding:10px;
        background: url("../../images/sozai/063-10size700centercutgirlsstationvideoframe.png");
        background-size:100%;
        background-repeat:no-repeat;}  
    
    /*! TVの枠 */   
    #eagletvwaku{
        display: block;
        width: 80%;
        padding:2% 0 0 0;
        margin:30px auto 0 auto;} 
    

    
/*! 埋め込み動画をレスポンシブ対応させる */
.video {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}
    
    
    
    
/*! 情報掲載のボックス */
    .gourmetbox{width:100%;
                height:1300px;
                margin:30px auto 30px auto;
        background-size:100%;
        background-repeat:no-repeat;}
    .gourmetbox h5{display:block;
        margin-top: 40px;
        text-align: left;
        width:100%;height:40px;}
    #yokoku{width:100%;}
    
    .gourmetguidebox{background-color: white;
                     width:43%;
                     height:250px;
                     margin:2%;
                     padding:1.5%;
                     float:left;}
    .menyusentence h6{display:block;font-size:11px;line-height: 1.5;margin:5px;text-align: left;}
    .menyusentence p{font-size: 12px;line-height: 1.5;}
    
    .playbutton{display:block;width:100%;margin:10px auto;}
    .playbutton a{color:hotpink;font-weight: bold;}
    
    
    
    
    
    
    .space{height: 30px;}
    
    
footer{ background-color: #000;
        color:white;
        margin-top: 0px;
        padding-top:100px;
        width:100%;
        text-align:center;}
footer p{
        display:block;
        width:92%;
        margin-left:auto;
        margin-right: auto;
        font-size:12px;
        text-align: left;
        line-height: 20px;
    }     
footer p small{ 
    display:block;
    margin-top: 25px;
    font-size:12px;
    padding-bottom: 25px;}  

}


/* タブレット以上レスポンシブ対応　非表示：420pxまで～ 
@media only screen and (min-width: 550px) {}　　　*/