@charset "utf-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a:link { text-decoration: none; color:#4c649c; }
a:visited { text-decoration: none; color:#4c649c; }
a:hover { text-decoration: none; color:#e0643d; }
a:active { text-decoration: none; color:#e0643d; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 	margin:0;	padding:0;}table {	border-collapse:collapse;	border-spacing:0;}fieldset,img { 	border:0;}address,caption,cite,code,dfn,th,var {	font-style:normal;	font-weight:normal;}ol,abbr,acronym {  border:0;}

html,body {
}
.embed-container{
    padding-bottom: 56.25%;
    margin-top: 15px;
    height: 0; 
    width: 100%;
    position: relative;
    margin-bottom: 30px;
}
.embed-container iframe,
.embed-container object,
.embed-container embed { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

dd a{
    margin-bottom: 5px;
}

img{
    width: 100%;
    height: auto;
}
ul{
    padding-left: 20px;
}

.caution{
    color: #FF3300;
    font-size: 11px;
}
.nondisplay{
   display: none; 
}

*{
	margin: 0;
	padding: 0;
}
.pc-only{
    display: block;
}
.smp-only{
    display: none;
}
.ancher{
    padding-top:75px;
    display: block; 
}
html{
  font-size: 62.5%;
}
body{
  font-size: 1.0rem;
}
body{
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "游明朝", YuMincho, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	width: 100%;
    line-height: 1.85;
    background: #eeeeee;
    letter-spacing: 0.1ex;
}

p{
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: justify;
}
p.read{
    text-align: center;
    font-weight: bold;
    margin-bottom: 60px;
}
p.bottom{
    margin-bottom: 0px;
}
p.signature{
    text-align: right;
    margin-bottom: 0;
}

#header h1{
    margin-bottom: 30px;
}
h1{
}
h1 a{
    color:#000000 !important;
}


header h2{
    font-size: 5.8rem;
    letter-spacing: normal;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.5;
}
h2.tone_logo{
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto 30px;
}

#header p{
    font-size: 5.8rem;
    letter-spacing: normal;
    line-height: 1.4;
    font-weight: bold;
}

    h2.sub-title{
        margin-top:45px;
        padding-top: 45px;
        border-top:1px solid #000000;
        width: 50%;
    }
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}


#header{

}
#container{
    background: #FFF;
}
.blue{
    position: fixed;
    left: 0;
    height: 100vh;
    width: 4px;
    background-color: #4c649c;
}
.orange{
    position: fixed;
    right: 0;
    height: 100vh;
    width: 4px;
    background-color: #e0643d;
}
.orange_line-test{
    background:url(/2tone/common/images/orange.jpg);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 2px 2px;
}
.orange_line{
    background: linear-gradient(transparent 80%, #e0643d 30%);
}
.blue_line{
    background: linear-gradient(transparent 80%, #4c649c 30%);
}
#header p:hover,
.color_inner:hover,
.color_bg{
    background: -webkit-linear-gradient(0deg,#4c649c, #e0643d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cooment_title{
    margin-bottom: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 3.6rem;
}
.color_bg{
    display: inline-block;
}
.color_bg_title{
    font-size: 3.6rem;
    font-weight: bold;
    padding: 0 15px;
    display: inline-block;
}
.color_bg_area{
    font-size: 2.0rem;
}


.color_inner{
    display: inline-block;
}
li .color_inner{
    display: inline;
}
.info{
    border-bottom:0px solid #909090;
    margin-bottom: 60px;
}
.info .track_list{
    font-size: 1.3rem;
    padding-left: 25px;
    font-weight: bold;
    margin-bottom: 60px;
}
.info .track_list_primary{
    margin-bottom: 30px;
}
    .info .track_list li{
        margin-bottom: 0;
    }

#main{
    display: block;
    padding-top: 90px;
}
    .section_common{
        margin-bottom: 190px;
    }
    .section_tone{
        margin-bottom: 0;
    }
    .section_inner{
        max-width: 830px;
        margin: 0 auto;
        padding: 0 60px;
        font-size: 1.8rem;
        position: relative;
    }
    figure{
        margin-bottom: 30px;
    }
    figure.archive{
        max-width: 450px;
        margin:0 auto 30px;
    }
    dl{
        margin-bottom: 15px;
        overflow: hidden;
    }
        dt{
            float: left;
            width: 100px;
            font-weight: bold;
        }
        dd{
            padding-left: 110px;
        }
    ul.track_list{
        margin-bottom: 30px;
    }
    ul li{
        margin-bottom: 10px;
        position: relative;
    }
    .live_info{
        margin-top: 30px;
    }

a.btn_more:link,
a.btn_more:visited{
    background-color: #000;
    color: #FFF;
    display: block;
    text-align: center;
    padding: 5px;
    margin: 30px auto 0;
    max-width: 450px;
}
a.btn_more:hover{
    background-image: -moz-linear-gradient(left, #4c649c, #e0643d);
    background-image: -ms-linear-gradient(left, #4c649c, #e0643d);
    background-image: -webkit-linear-gradient(left, #4c649c, #e0643d);
    background-image: linear-gradient(left, #4c649c, #e0643d);
    color: #FFF;
    display: block;
    text-align: center;
    padding: 5px;
    margin: 30px auto 0;
    max-width: 450px;
}

a.btn_amazon:link,
a.btn_amazon:visited{
    background-color: #000;
    color: #FFF;
    display: block;
    text-align: center;
    padding: 5px;
    margin: 30px auto 0;
    max-width: 450px;
}
a.btn_amazon:hover{
    background-image: -moz-linear-gradient(left, #4c649c, #e0643d);
    background-image: -ms-linear-gradient(left, #4c649c, #e0643d);
    background-image: -webkit-linear-gradient(left, #4c649c, #e0643d);
    background-image: linear-gradient(left, #4c649c, #e0643d);
    color: #FFF;
    display: block;
    text-align: center;
    padding: 5px;
    margin: 30px auto 0;
    max-width: 450px;
}
.history a.btn_amazon:link,
.history a.btn_amazon:visited{
    background-image: -moz-linear-gradient(left, #4c649c, #e0643d);
    background-image: -ms-linear-gradient(left, #4c649c, #e0643d);
    background-image: -webkit-linear-gradient(left, #4c649c, #e0643d);
    background-image: linear-gradient(left, #4c649c, #e0643d);
    margin-top: 30px !important;
    margin-bottom: -30px !important;
}
.comment{
    margin-top: 45px;
}
.comment_sh_uza{
    margin-bottom: 0px;
}
.icon{
    width: 100px;
    height: auto;
    float: left;
}
.icon_comment{
    padding-left: 130px;
}
    .comment_common{
        position: relative;
    }
    .icon_comment p{
        padding: 10px 18px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .arrow_box {
        position: relative;
        background: #ffffff;
        border: 3px solid #000000;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px; 
    }
    .arrow_box:after, .arrow_box:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #ffffff;
        border-width: 15px;
        margin-top: -15px;
    }
    .arrow_box:before {
        border-color: rgba(0, 0, 0, 0);
        border-right-color: #000000;
        border-width: 19px;
        margin-top: -19px;
    }
    .icon_sh{
        width: 150px;
        height: auto;
        position: absolute;
        left: -110px;
        top: 209px;
        font-size: 1.3rem;
        text-align: center;
    }
    .comment_sh{
        width: 50%;
        height: auto;
        float: left;
        padding-right: 30px;
    }

    .icon_uza{
        width: 110px;
        height: auto;
        position: absolute;
        right: -100px;
        top: 186px;
        font-size: 1.3rem;
        text-align: center;
    }
    .comment_uza{
        width: 50%;
        height: auto;
        float: right;
        padding-left: 30px;
    }
    .comment_common figure{
        margin-bottom: 15px;
    }
    .comment_common figure img{
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px; 
    }
    .comment_common p{
        font-size: 1.3rem;
        margin-bottom: 0;
        text-align: left;
    }
    .post-bottom {
        height: 12px;
        margin: 0 auto;
        overflow: hidden;
        padding: 60px 0 90px;
        width: 72px;
    }
    .post-bottom span {
        background-color: #000000;
        border-radius: 6px;
        display: block;
        float: left;
        height: 12px;
        margin: 0 6px;
        width: 12px;
    }

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
    .movie iframe{
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }



    .sns-link{
        font-size: 3.6rem;
    }
    .sns-link li{
        display: inline-block;
        float: right;
        line-height: 1;
        margin-left: 15px;
        margin-bottom: 60px;
    }
    small{
        position: absolute;
        left: 60px;
        top:15px;
        display: inline-block;
        font-size: 1.5rem;
        letter-spacing: 0.1ex;
    }


.history ul{
    list-style: none;
    padding-left: 0;
}

.history{
  background: url(/2tone/common/images/history_line.jpg);
  background-position: center top;
  background-size: 6px 6px;
  background-repeat: repeat-y;
  margin-top: 0px;
  padding-bottom: 30px;
}

.history h2{
  background: #000;
  color: #FFF;
  line-height: 4.5;
  font-size: 1.8rem;
  display: block;
  width: 80px;
  height: 80px;
  text-align: center;
  margin: 0 auto 60px;
  border-radius: 80px;
    -moz-border-radius: 80px;
    -webkit-border-radius: 80px;
    -o-border-radius: 80px;
    -ms-border-radius: 80px;
}
a.btn-viewmore:link,
a.btn-viewmore:visited{
    background-color: #000;
    color: #fff;
    display: block;
    margin: 0px auto 0;
    max-width: 450px;
    padding: 5px;
    text-align: center;
}
a.btn-viewmore:hover{
  color: #FFF;
  background-image: -moz-linear-gradient(left, #4c649c, #e0643d);
    background-image: -ms-linear-gradient(left, #4c649c, #e0643d);
    background-image: -webkit-linear-gradient(left, #4c649c, #e0643d);
    background-image: linear-gradient(left, #4c649c, #e0643d);
}
  .history_contents_info figure{
    width: 45%;
    height: auto;
  }
  .history_contents_info p{
    display: block;
    width: 45%;
    height: auto;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 30px;
  }

  .history_contents{
    padding-top: 0px;
    margin-bottom: 30px;
  }
    .history-contents-right{

    }
    .history-contents-common{
      clear: both;
      padding-top: 0px;
    }
    .history-contents-common li{
      padding-top: 60px;
    }

      .history_contents h3.history_right{
        float: right;
        text-align: left;
        padding-top: 60px;
        font-size: 4.8rem;
      }
      .history_contents h3.history_left{
        float: left;
        text-align: right;
        padding-top: 60px;
        font-size: 4.8rem;
      }

      
.history_contents_right li:nth-child(odd) figure{
        float: left;
      }
      .history_contents_right li:nth-child(odd) p{
        float: right;
      }
      .history_contents_right li:nth-child(even) figure{
        float: right;
      }
      .history_contents_right li:nth-child(even) p{
        float: left;
      }

      .history_contents_left li:nth-child(odd) figure{
        float: right;
      }
      .history_contents_left li:nth-child(odd) p{
        float: left;
      }
      .history_ontents_left li:nth-child(even) figure{
        float: left;
      }
      .history_contents_eft li:nth-child(even) p{
        float: right;
      }


      .history_contents_right figure{
        float: left;
      }
      .history_contents_right p{
        float: right;
      }
      .history_contents_left figure{
        float: right;
      }
      .history_contents_left p{
        float: left;
      }

#op-more{
display: none;
}
#op-btn-close{
    display: none;
}


/* footer */

a#page-top:link,
a#page-top:visited {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: transparent;
}

/*===============================================
breakpoint:600
===============================================*/
@media screen and (max-width: 940px){
    #header{
        padding: 0 4px;
    }
    #header h1{
        display: none;
    }
    #header p {
        font-size: 3.2rem;
        font-weight: bold;
        letter-spacing: normal;
        line-height: 1.5;
        text-align: justify;
    }
    header h2 {
        font-size: 3.2rem;
        font-weight: bold;
        letter-spacing: normal;
        margin-bottom: 30px;
        text-align: center;
    }
    ul li {
        margin-bottom: 0px;
        position: relative;
    }
    .section_common {
        margin-bottom: 90px;
    }

    .section_inner {
        font-size: 1.5rem;
        padding: 0 20px;
    }
    p {
        font-size: 1.5rem;
        margin-bottom: 30px;
        text-align: left;
    }
    p.read {
        font-weight: bold;
        margin-bottom: 30px;
        text-align: left;
    }
    p.read br{
        display: none;
    }

    .history {
        background: none;
        margin-top: 0;
        padding-bottom: 0px;
    }
    .history h2 {
        margin: 60px auto 30px;
    }
    .history_contents_right figure {
        float: none;
    }
    .history_contents_info figure {
        height: auto;
        width: 100%;
        max-width: 350px;
        margin: 0 auto 15px;
    }
    .history_contents_right p {
        float: none;
    }
    .history_contents_info p {
        display: block;
        font-size: 1.3rem;
        height: auto;
        line-height: 1.5;
        margin:0;
        width: 100%;
    }
    .history_contents {
        margin-top: 30px;
        padding-top: 30px;
        margin-bottom: 0;
        padding-bottom: 0;
        border-top: 1px dotted #000000;
    }
    .history_contents_primary{
        margin-top: 0px;
        padding-top: 0px;
        margin-bottom: 30px;
        padding-bottom: 0px;
        border-top: 0px dotted #000000;
    }
    #op-more {
        margin-bottom: 30px;
    }
    a.btn-viewmore:link,
    a.btn-viewmore:visited{
        background-color: #000;
        color: #fff;
        display: block;
        margin: 30px auto 0;
        max-width: 450px;
        padding: 5px;
        text-align: center;
    }
    h2.tone_logo {
        height: auto;
        margin: 0 auto 30px;
        max-width: 250px;
        width: 100%;
    }
    .comment{
        margin-bottom: 30px;
    }
    .comment_sh_uza{
        margin-bottom: 0px;
    }
    .icon{
        width: 100px;
        height: auto;
        float: none;
        margin: 0 auto 15px;
    }
    .icon_comment{
        float: none;
        height: auto;
        padding-top: 15px;
        width: 100%;
        padding-left: 0;
    }
    .comment_common{
        position: relative;
        margin-bottom: 30px;
    }
    .icon_comment p{
        padding: 10px 18px;
        margin-bottom: 0;
        font-weight: normal;
        font-size: 1.5rem;
    }
    .icon_comment br{
        display: none;
    }

    .arrow_box {
        position: relative;
        background: #ffffff;
        border: 3px solid #000000;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px; 
    }
    .arrow_box:after, .arrow_box:before {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .arrow_box:after {
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #ffffff;
        border-width: 15px;
        margin-top: -15px;
    }
    .arrow_box:before {
        border-color: rgba(0, 0, 0, 0);
        border-right-color: #000000;
        border-width: 19px;
        margin-top: -19px;
    }
    .icon_sh{
        width: 150px;
        height: auto;
        position: relative;
        left: auto;
        top: auto;
        font-size: 1.3rem;
        text-align: center;
        margin:0 auto 15px;
    }
    .comment_sh,
    .comment_uza{
        width: 100%;
        height: auto;
        float: none;
        padding-right: 0px;
        padding-left: 0px;
    }

    .icon_uza{
        width: 110px;
        height: auto;
        position: relative;
        left: auto;
        top: auto;
        font-size: 1.3rem;
        text-align: center;
        margin:0 auto 15px;
        right: auto;
    }

    .comment_common figure{
        max-width: 350px;
        margin: 0 auto 15px;
    }
    .comment_common figure img{
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px; 
    }
    .comment_common p{
        font-size: 1.3rem;
        margin-bottom: 0;
        text-align: left;
    }
    .post-bottom {
        height: 12px;
        margin: 0 auto;
        overflow: hidden;
        padding: 30px 0 60px;
        width: 72px;
    }

 .icon_comment .arrow_box {
    position: relative;
    background: #ffffff;
    border: 3px solid #222222;
  }
  .icon_comment .arrow_box:after, .icon_comment .arrow_box:before {
    bottom: 100%;
    top:auto;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .icon_comment .arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 12px;
    margin-left: -12px;
  }
  .icon_comment .arrow_box:before {
    border-color: rgba(34, 34, 34, 0);
    border-bottom-color: #222222;
    border-width: 16px;
    margin-left: -16px;
  }

    .sns-link {
        width: 123px;
        padding: 0;
        margin: 0 auto;
    }
    .sns-link li {
        display: inline-block;
        float: right;
        line-height: 1;
        margin: 0 15px;
    }

    small {
        display: block;
        font-size: 1.3rem;
        left: auto;
        letter-spacing: 0.1ex;
        position: relative;
        top: auto;
        padding: 15px 0 30px;
        text-align: center;
    }
    .history a.btn_amazon:link,
    .history a.btn_amazon:visited{
        background-image: -moz-linear-gradient(left, #4c649c, #e0643d);
        background-image: -ms-linear-gradient(left, #4c649c, #e0643d);
        background-image: -webkit-linear-gradient(left, #4c649c, #e0643d);
        background-image: linear-gradient(left, #4c649c, #e0643d);
        margin-top: 30px !important;
        margin-bottom: 0px !important;
    }
        dl{
            margin-bottom: 15px;
            overflow: hidden;
        }
            dt{
                float: none;
                width: 100px;
                font-weight: bold;
            }
            dd{
                padding-left: 0px;
            }


}