@charset "utf-8";

/* ============== BASE============== */

.pc { display: none !important; }

body { margin: 0; }


#fftop_recomDetail section {
  padding:0;
}



a { text-decoration: none!important; }

/*  ============== Fadein1 ============== */

.fadein {
  opacity     : 0;
  transform   : translateY(30px);
  transition  : all 1s;
  }


/*  ============== 940px ============== */

.mainContentMT {
  width: 100%!important;
  }

.rootMT ul {
    overflow  : hidden;
    width     : 940px!important;
    margin    : 0 auto;
    }

tr, th, td, div, span, a,p {
    color: inherit;
}


/*  ============== MAIN ============== */

#coa2020summer_ouchi {
    width  : 100%;
    font-family : 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','游ゴシック',YuGothic,'メイリオ',Meiryo,sans-serif;
}



/*  ============== HEAD ============== */

.head {
  height              : 200vw;
  position            : relative;
  background: #fff;
  background-image    : url(../../ouchi/img/head_sp.jpg);
  background-size     : 100%;
  background-repeat: no-repeat;
  background-position : top;
  text-align: center;
}


.head .title {
  text-align : center;
}


.head .title img {
  width  : 100%;
  margin: 20% 0 60% 0;
}


.head p {
  width: 90%;
  margin: auto;
  color  : #000;
  font-size: 13px;
}


/*  ==============  共通 ============== */

/*タイトル*/

#coa2020summer_ouchi h1 {
  height: auto;
  text-align: center;
  margin: 30px auto 30px auto;
  background: none;
  padding: 0;
}


#coa2020summer_ouchi h1 img{
   width: 85%;
}


/*背景*/

.bg {
  padding-bottom: 50px;
  background-attachment: fixed;
  background-image: url(../../ouchi/img/bg.jpg);
  background-position: center;
}



/*各コンテンツのベース*/

.contents_base{
  margin : 30px auto;
  width: 95%;
  background: #fff;  
  padding: 10px 0 0 0;
}


hr.line {
  width: 90%;
  display:block;
  border-top: 5px dotted #a7d7db;
  margin: 30px auto 20px auto;
  border: 0px;
}


/*  ==============  文字系 ============== */

p.menu_name {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}


p.catch {
  font-size: 13px;
  color: #00adb6;
  font-weight: bold;
  margin-bottom:10px;
}

p.catch span{
  color: #000;
}


p.caption {
  color: #000;
  font-size: 13px;
  line-height: 1.6;
}


dd p.caption {
  text-align: justify;
}


p.tokuten {
  color: #000;
  font-weight: bold;
  font-size: 16px;
}


p.tokuten span.red{
   color: #c72727;
}


/*  ==============  ビックカメラ ============== */

.contents_01 {
  margin-top: 20px;
}



/*フレックス*/

.contents_01 .flex{
  width     : 90%;
  display   : flex;
  flex-wrap : wrap;
  justify-content: space-between;
  margin    : auto;
}


.contents_01 .flex .con_title {
  display: block;
  width: 100%;
  margin: 30px 0;
  text-align: center;
}



.contents_01 .flex .con_title img {
  width: 100%;
}



.contents_01 .flex dl.block {
  display : flex;
  flex-direction: column-reverse;
  width   : 45%;
}



.contents_01 .flex dt {
   width : 100%;
   margin-top: auto;
}


.contents_01 .flex dt img {
  width : 100%;
}


.contents_01 .flex dd {
  width: 100%;
  text-align: center;
}


.contents_01 .text {
  width: 95%;
  text-align: center;
  margin: 30px auto 0 auto;
}




/*  ==============  インテリア ============== */

.contents_02{
   text-align: center;
    margin     : auto;
}




.contents_02 .main_view img{
  width  : 100%;
}


.contents_02 p.menu_name{
 margin-top: 10px;
}



.contents_02 .text {
  width: 95%;
  margin: auto;
}





.contents_02 .contents {
  width: 100%;
  margin-top: auto;
}



.contents_02 .flex dl.block {
  width   : 95%;
  margin: 0 auto 30px auto;
}



.contents_02 .flex dt img {
  width : 100%;
}



.contents_02 .caption {
  width: 90%;
  margin: 0 auto 15px auto;
}



/*  ==============  アパレル ============== */







/*フレックス*/

.contents_03 .flex{
  width     : 100%;
  margin    : auto;
  text-align: center;
}

.contents_03 .flex dl.block {
  width   : 95%;
  margin  : 0 auto;
}


.contents_03 .flex dt {
  width  : 100%;
  margin : auto;
}


.contents_03 .flex dt img {
  width: 100%;
}


/*  ==============  音楽 ============== */

.contents_04 {
    padding-bottom: 50px;

}

.contents_04 .flex{
  margin    : auto;
  text-align: center;
}

.contents_04 .flex dl {
  width     : 90%;
  margin: auto;
}




.contents_04 .caption {
  margin-bottom: 15px;
}

.contents_04 .flex dt img {
  width: 100%;
}




/*  ==============  foot ============== */

.foot {
  width: 90%;
  margin: auto;
  text-align: center;
}

.foot p{
  font-size: 20px;
  font-weight: bold;
  color:#0fa4ac;
}


.foot p.notice {
  width: 90%;
  color: #000;
  font-size: 13px;
  text-align: justify;
  font-weight: normal;
}


.foot img {
  width: 100%;
}



.btn-border {
  display: inline-block;
  width: 100%;
  background-color: #6071ab;
  font-size: 15px;
  letter-spacing: .1rem;
  color: #fff;
  font-weight:bold;
  text-decoration: none;
  padding: 25px 0;
  transition: .4s;
}

.btn-border:hover {
  background: #000;
}



/*  ==============  リンクボタン ============== */


.link {
  text-align: center;
}




.link a {
  display: inline-block;
  color: #fff;
  width: 100%;
  background: #000;
  margin: 30px auto;
  padding: 25px 0;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: .1rem;
}


.link a:hover {
  background: #a7d7db;
  transition: .4s;
}

.container {
  margin: 0 auto 20px auto;
}


/*  ==============  ナビゲーション ============== */



.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100000;
}


ul.clearfix {
  width      : 100%;
  background : #0fa4ac;
  display    : flex;
  flex-wrap: wrap;
  justify-content: center;
}


ul.clearfix li {
  width: 46%;
  text-align: center;
  padding: 10px 6px 10px 6px;
}

ul.clearfix li:nth-child(1){
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

ul.clearfix li:nth-child(2){
  border-bottom: 1px solid #fff;
}



ul.clearfix li:nth-child(3){
  border-right: 1px solid #fff;
}




ul.clearfix li a {
  color: #fff;
  font-size :13px;
}


ul.clearfix li a:hover {
  opacity: .7;
}