@charset "UTF-8";

/* 
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;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    color: #615F5F;
}

html{
  scroll-behavior: smooth;
}

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

nav ul, li {
    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;
    text-decoration: none;
}

/* 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;
}

body{
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

input, select {
    vertical-align:middle;
}

/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
body{
    width: 100%;
    overflow-x: hidden;
}

.pc{
	display: none;
}

.sp{
	display: block;
}

.inner{
    width: 90%;
    margin: 0 auto;
}

html {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px){

    html {
      overflow: auto;
      width: 100%;
    }

    body{
        width: 100%;
        overflow-x: auto;
    }
	.pc{
		display: block;
	}

	.sp{
		display: none;
	}

    .inner{
        max-width: 900px;
        margin: 0 auto;
    }
}


/*------------------------------------------------------------
    header
------------------------------------------------------------*/
header{
    background: url(../img/fv-bg-sp.png);
    color: #fff;
    background-size: cover;
    text-align: center;
    padding: 100px 0 60% 0;
}

header h1 img{
    width: 60%;
    margin: auto;
}

header h2{
    margin: 40px auto 30px auto;
    font-size: 1.8em;
    line-height: 1.5;
}

header p{
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 768px){
    header{
        background: url(../img/fv-bg.png) no-repeat top center;
        box-sizing: border-box;
        width: 100%;
        background-size: cover;
        color: #fff;
        text-align: center;
        padding: 250px 0 40% 0;
        position: relative;
    }

    header h1 img{
        max-width: 306px;
        margin: auto;
    }

    header h2{
      margin: 100px auto 50px auto;
      font-size: 2.8em;
      line-height: 1.6;
    }

    header p{
      font-weight: bold;
      font-size: 1.3em;
      line-height: 1.8;
    }

    header nav{
        position: fixed;
        right: 3%;
        bottom: 30px;
        z-index: 100;
    }

    header nav ul li{
        font-size: 1.3em;
        line-height: 20px;
        font-weight: bold;
        margin: 20px 0;
        text-align: right;
        background: url(../img/menu-01.png) no-repeat right top;
        background-size: auto 100%;
    }

    header nav ul li a{
        color: #fff;
        display: block;
        width: 150px;
        height: 100%;
        padding: 5px 20px 5px 0;
    }

    header nav ul li a:hover{
        color: #EB6D99;
    }

    header .fv-contact{
        background: rgb(239,146,187);
        background: linear-gradient(130deg, rgba(239,146,187,1) 0%, rgba(203,86,155,1) 100%);
        width: 210px;
        height: 45px;
        line-height: 45px;
        border-radius: 50px;
        position: fixed;
        right: 3%;
        top: 5%;
        letter-spacing: 3px;
        z-index: 1000;
    }

    header .fv-contact a{
        color: #fff;
        display: block;
        font-weight: bold;
        font-size: 1.3em;
        width: 210px;
        height: 60px;
    }

    header .fv-contact a:hover,
    #contents01 a:hover{
        opacity: 0.5;
        display: block;
    }

    .bgblack{
        background: url(../img/menu-01.png) no-repeat right top;
        background-size: auto 100%;
    }

    .bgblack a{
      color: #fff;
    }

    .bgwhite a{
      color: #ccc;
    }

    .bgwhite{
        background: url(../img/menu-02.png) no-repeat right top;
        background-size: auto 100%;
    }

    .bgblack a:hover{
      color: #EB6D99;
    }

    .bgblack:hover{
        background: url(../img/menu-03.png) no-repeat right top;
        background-size: auto 100%;
    }

    .bgwhite a:hover{
      color: #EB6D99;
    }

    .bgwhite:hover{
        background: url(../img/menu-03.png) no-repeat right top;
        background-size: auto 100%;
    }

    .current{
        color: #EB6D99 !important;
        background: url(../img/menu-03.png) no-repeat right top;
        background-size: auto 100%;
    }

}

/*--------------------ハンバーガーボタン--------------------*/
.hamburger {
  position: fixed;
  z-index : 2000;
  right : 13px;
  top   : 12px;
  width : 45px;
  height: 45px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 35px;
  height  : 4px ;
  left    : 6px;
  background : #E3E3E4;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 22px;
}
.hamburger span:nth-child(3) {
  top: 34px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index : 1000;
  top  : 0;
  left : 0;
  color: #fff;
  text-align: right;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
}

nav.globalMenuSp ul {
  background: rgba(0,0,0,0.7);
  margin: 0 0 0 auto;
  padding: 0 30px;
  width: 40%;
  height: 1000vw;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  font-size: 18pt;
  letter-spacing: 5px;
  padding: 0.35em 0;
}

nav.globalMenuSp ul li:first-child{
  padding-top: 3.5em;
}

nav.globalMenuSp ul li.sp-contact{
  background: rgb(239,146,187);
  background: linear-gradient(130deg, rgba(239,146,187,1) 0%, rgba(203,86,155,1) 100%);
  height: 40px;
  border-radius: 50px;
  line-height: 40px;
  padding: 5px 10px;
  display: block;
  text-align: center;
  margin: 15px auto;
  letter-spacing: 2px;
  font-size: 1.3em;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  text-decoration :none;
  font-weight: bold;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

/*------------------------------------------------------------
    SAMPLE
------------------------------------------------------------*/

.wrap-box{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#contents01{
    background: #3B3B3B;
    color: #fff;
    width: 100%;

}

#contents01 img{
    width: 100%; 
}

#contents01 .inner{
    width: 90%;
    margin: 0 auto;
}

#contents01 .inner h3{
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    letter-spacing: 5px;
    padding-top: 20px;
}

#contents01 .inner h3 span{
    display: block;
    font-size: 0.7em;
    margin-top: 15px;
}

#contents01 .inner p{
    color: #fff;
    margin-top: 30px;
    line-height: 1.8;
    font-size: 1.1em;
    font-weight: bold;
}

#contents01 .box01{
    position: relative;
    padding-top: 65%;
}

#contents01 .box02{
    position: relative;
    padding-bottom: 300px;
}

#contents01 .box02 .txt-box{
    margin-top: 100px;
    padding-bottom: 100px;
    position: relative;
    z-index: 100;
}

#contents01 .box03{
    position: relative;
    padding-bottom: 200px;
}

#contents01 .box03 .txt-box{
    margin-top: 100px;
    position: relative;
    z-index: 100;
}

#contents01 .box04{
    position: relative;
    padding: 200px 0 50px 0;
    margin-top: 100px;
}

#contents01 .box04 .txt-box{
    margin-top: 100px;
    position: relative;
    z-index: 100;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;

    }
}

#contents01 .contents01-img{
    position: absolute;
    right: 0;
    top: -20%;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
}

#contents01 .contents02-img{
    position: absolute;
    right: -40%;
    bottom: -5%;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
}

#contents01 .contents03-img{
    position: absolute;
    right: -5%;
    bottom: 0;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
}

#contents01 .contents04-img{
    position: absolute;
    right: -5%;
    top: 0;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
}

@media screen and (min-width: 768px){
    #contents01{
        background: url(../img/pc-bg02.png) no-repeat bottom center #3B3B3B;
        background-size: 100% auto;
        padding: 0 0 300px 0;
    }

    #contents01 .inner{
        width: 100%;
      max-width: 1024px;
      margin: 0 auto;
      position: relative;
    }

    #contents01 .box01{
        position: relative;
        padding-top: 0;
        min-height: 650px;
        box-sizing: border-box;
    }

    #contents01 .box01 .contents01-img{
        position: absolute;
        right: -20%;
        top: -40%;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
    }

    #contents01 .box01 .txt-box{
        width: 50%;
        padding-top: 150px;
    }

    #contents01 .contents02-img{
        position: absolute;
        left: 0;
        bottom: 0;
        max-width: 469px;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
    }

    #contents01 .box02,
    #contents01 .box03{
        width: 100%;
        max-width: 950px;
    }

    #contents01 .box02{
        padding: 100px 0;
    }

    #contents01 .box02 .txt-box{
        margin: 80px auto 0 50%;
        box-sizing: border-box;
    }

    #contents01 .box03{
        padding: 100px 0;
        position: relative;
    }

    #contents01 .contents03-img{
        position: absolute;
        right: 15%;
        bottom: 0;
        max-width: 323px;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
    }

    #contents01 .box03 .txt-box{
        margin: 80px auto 0 10%;
        box-sizing: border-box;
    }

    #contents01 .box04{
        padding: 150px 0 50px 100px;
        position: relative;
    }

    #contents01 .contents04-img{
        position: absolute;
        left: 0;
        top: 10%;
        max-width: 464px;
        opacity: 0;
        transform: translate(0, -100px);
        transition: all 1s ease-out;
    }

    #contents01 .box04 .txt-box{
        margin: 0 auto 0 50%;
        box-sizing: border-box;
    }
}

.btn-sample{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3em;
  background: rgb(240,171,56);
  background: linear-gradient(130deg, rgba(240,171,56,1) 0%, rgba(238,130,56,1) 100%);
  text-align: center;
  width: 210px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  margin: 30px auto;
}

.btn-sample a{
  color: #3b3b3b;
  display: block;
}

.btn-sample a:hover{
    opacity: 0.7;
    display: block;;
}

/*------------------------------------------------------------
    配信方法
------------------------------------------------------------*/

#contents02{
    background: #024A8B;
    color: #fff;
    box-sizing: border-box;
    padding: 100px 0;
}

#contents02 .box01{
    margin-bottom: 100px;
}

#contents02 figure{
    margin: 0 auto;
    text-align: center;
}

#contents02 h3{
    font-size: 2em;
    text-align: center;
    margin-bottom: 100px;
}

#contents02 h4{
    font-size: 1.7em;
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.3;
}

#contents02 .inner p{
    margin: 30px auto;
    line-height: 1.5;
    width: 90%;
    font-weight: 600;
}

#contents02 .box02{
    padding-bottom: 50px;
}

#contents02 .box01-img-sp{
    background: url(../img/sp-contents-img06.png) no-repeat;
    background-position: 50% 55%;
}

.sp-img01{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.1s;
}

.sp-img03{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.3s;
}

.sp-img04{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.1s;
}

.sp-img05{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.3s;
}

.sp-img06{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.5s;
}

@media screen and (min-width: 768px){
    #contents02{
        background: #024A8B;
        color: #fff;
        box-sizing: border-box;
    }

    #contents02 h3{
        font-size: 2.5em;
        margin-bottom: 100px;
    }

    #contents02 h4{
        font-size: 2em;
        margin-bottom: 50px;
        line-height: 1.3;
    }

    #contents02 .inner .box01-img{
        background: url(../img/contents02-img03.png) no-repeat;
        background-position: 47% 50%;
        width: 80%;
        margin: 0 auto 50px auto;
        text-align: center;
        display: flex;
        text-align: center;
        vertical-align: bottom;
    }

    #contents02 .inner .box01-img figure{
        margin: 0 50px;
    }

    #contents02 .inner p{
        clear: both;
        font-size: 1.1em;
        line-height: 2.2;
    }

    #contents02 .inner .box02-img{
        width: 100%;
        margin: 0 auto 50px auto;
        text-align: center;
        display: flex;
        text-align: center;
        vertical-align: bottom;
    }

    #contents02 .inner .box02-img figure{
        margin: 0 30px;
    }
}

.img01{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.1s;
}

.img02{
    opacity: 0;
    transform: translate(0, -150px);
    transition: all 0.3s ease-out 0.3s;
}

.img03{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.1s;
}

.img04{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.3s;
}

.img05{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.5s;
}

.img06{
    opacity: 0;
    transform: translate(0, -100px);
    transition: all 0.3s ease-out 0.7s;
}

/*------------------------------------------------------------
    視聴方法
------------------------------------------------------------*/

#contents03{
  margin: 100px auto;
  font-size: 1.1em;
  color: #615F5F;
}

#contents03 li{
  line-height: 1.5;
}

#contents03 h2{
  font-size: 1.5em;
  margin-bottom: 30px;
}

#contents03 .contents03-list{
  margin-bottom: 50px;
  width: 100%;
}

#contents03 p{
  margin-top: 20px;
  line-height: 1.3;
}

#contents03 .contents03-list-02 li{
  display: inline-block;
  margin-right: 50px;
}

#contents03 .contents03-list02{
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
}

.mt200{
  margin-top: 100px;
}

@media screen and (min-width: 768px){
    #contents03{
        padding: 0 0 50px 0;
        margin-top: 200px;
    }

    #contents03 h2{
      font-size: 2em;
      margin-bottom: 30px;
    }

    #contents03 .contents03-list{
      margin-bottom: 50px;
    }

    #contents03 .contents03-list02{
        margin-bottom: 200px;
    }

    #contents03 .contents03-list li,
    #contents03 .contents03-list02 li{
      margin: 10px 0;
      text-indent: -1.2em;
      padding: left: 1.2em;
      line-height: 1.5;
    }

    #contents03 p{
      margin-top: 20px;
    }

    #contents03 .contents03-list-02 li{
      display: inline-block;
      margin-right: 50px;
    }

    #contents03 .contents03-list-02 li a:hover{
      opacity: 0.8;
    }

    .mt200{
      margin-top: 200px;
    }

    #contents03 p{
      margin: 20px 0;
      line-height: 2;
    }
}

/*------------------------------------------------------------
    footer
------------------------------------------------------------*/
footer{
  overflow: hidden;
  text-align: center;
  padding: 30px 0;
  border-top: 1px solid #E1DEDD;
  line-height: 2em;
  color: #615F5F;
}

footer a{
  color: #615F5F;
}

footer a:hover{
  opacity: 0.8;
}