@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

html {
    height: 100%;
    font-size: 100%;
	scroll-behavior: smooth;
}

body {
    color: #fff;
    margin: 0;
    padding: 0;
    font-weight: 300;
    height: 100%;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 1rem;
}

::-moz-selection {
    color: #fff;
    background: #0C122A;
    text-shadow: none;
}

::selection {
    color: #fff; 
    background: #0C122A;
    text-shadow: none;
}



h1, h2, h3, h4, h5  {
    font-weight: 400;
    color: #fff;
    padding: 0;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	letter-spacing: 5px;
}

h1 {
    font-size: 2rem;
    line-height: 2rem;
	font-family: "Tenor Sans", sans-serif;
}

h2 {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    line-height: 2.8rem;
    color: #404045;
	font-family: "Tenor Sans", sans-serif;
}

h3 {
    margin: 0 0 30px;
    font-size: 1.6rem;
    line-height: 2rem;
	letter-spacing: 5px;
	font-weight: 500;
}

h4 {
    margin: 0 0 30px;
    font-size: 1.4rem;
    line-height: 1.9rem;
}

h5 {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6rem;
	margin-bottom:20px;
	margin-top:30px;
}

h6 {
    margin: 10px 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

p {
    margin-bottom: 1rem;
	letter-spacing: 0;
	line-height: 2rem;
	font-size: 0.9rem;
	font-weight: 400;
	color:#fff;
}

a	{
    color: #415C93;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -ms-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #7190C6;
    text-decoration: none;
}

img {
    max-width: 100%;
}

i, em   {
    font-style: italic;
    font-family: serif;
}

blockquote	{
    border: 0;
    padding-left: 60px;
    position: relative;
}

blockquote:before  {
    content: "";
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 2rem;
    color: #404045;
}

/* ----------------------------------------------------
HEADER
---------------------------------------------------- */
header  {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    display: table;
    position: relative;
}
html.webp header {
	background: url(../images/header_bg.webp) no-repeat #1C1E3D;
    background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

html.no-webp header {
	background: url(../images/header_bg.jpg) no-repeat #1C1E3D;
    background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

#header  {
    width: 100%;
    height: 80%;
    position: relative;
    z-index: 1;
    text-align: center;
    display: table;
    position: relative;
}

body.thanks header  {
    width: 100%;
    height: 50%;
	background: url(../images/header_bg.jpg) no-repeat #1C1E3D;
    position: relative;
    z-index: 1;
    text-align: center;
    display: table;
    background-size: cover;
	background-position: center;
	background-attachment: fixed;
}



#logo   {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

#logo img.toplogo   {
    max-width: 480px;
	margin-top:100px;
}

body.thanks #logo img.toplogo {
	max-width: 300px;
	margin-top:70px;
}

.onairdate {
	margin-top:20px!important;
}
.onairdate img {
	width: 420px;
	padding-bottom:10px;
}
body.thanks .onairdate img {
	width: 320px;
	padding-bottom:10px;
}

/* ----------------------------------------------------
CONTENT
---------------------------------------------------- */

section {
    position: relative;
    padding: 5rem 0 5rem;
}

h2.section-title  {
    color: #fff;
    font-size: 1.6rem;
	font-weight:100;
	margin-top: 3rem;
    margin-bottom: 3rem;
	letter-spacing: 5px!important;
    text-align: center;
}

.btn-call   {
    padding: 20px 45px;
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    display: inline-block;
    margin: 30px 0 0;
    border: 1px solid #fff;
	font-weight:600;
	letter-spacing: 3px;
}

.btn-call:hover   {
    border-color: #3F72BA;
	background-color: #3F72BA;
    color: #fff;
}

.bg-dark .btn-call:hover   {
    border-color: #fff;
    color: #fff;
}


.equal-height-col.row   {
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
}

.equal-height-col [class*="col-"]  {
    display: table-cell;
    margin: 0;
    padding: 0;
    position: relative;
}

/* ----------------------------------------------------
INTRODUCTION SECTION
---------------------------------------------------- */

html.webp #introduction-section	{
	background: url(../images/bg_intro.webp) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}
html.no-webp #introduction-section	{
	background: url(../images/bg_intro.jpg) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}

h3.subheading {
	color: #88BAD3;
	font-size: 1.4rem;
}

/* ----------------------------------------------------
RADIKO SECTION
---------------------------------------------------- */
#radiko-section	{
	background: #12223A;
	text-align: center;
}

.radikobanner {
	margin-bottom:15px;
}
.radikobanner img {
	width:738px;
}
.btn-s   {
    padding: 8px 35px;
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    display: inline-block;
    margin: 30px 0 30px;
    border: 1px solid #fff;
	font-weight:500;
	letter-spacing: 1px;
	border-color: #415C93;
	background-color: #415C93;
	vertical-align: middle;
}
.btn-s2 {
    padding: 8px 35px;
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    display: inline-block;
    margin: 10px 0 10px;
    border: 1px solid #fff;
	font-weight:500;
	letter-spacing: 1px;
	border-color: #415C93;
	background-color: #415C93;
	vertical-align: middle;
}

.btn-s2:hover   {
    border-color: #00A7E9;
	background-color: #00A7E9;
    color: #fff;
}
p.text-small {
	font-size: 0.7rem;
}


/* ----------------------------------------------------
NAVIGATOR SECTION
---------------------------------------------------- */
html.webp #navigator-section	{
	background: url(../images/bg_nav.webp) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}
html.no-webp #navigator-section	{
	background: url(../images/bg_nav.jpg) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}
.navigator {
	text-align: left;
	margin: 0 20px 40px 0;
}
.navigator h3 {
	font-size:1.4rem;
	letter-spacing: 3px;
}
.navBox {margin:0 40px 0 40px;}
.nav img {
	margin-bottom:30px;
	width:200px;
}
.profile {color: #A1C0E5;}
.box5 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #647991;
}
.box5 p {
    margin: 0; 
    padding: 0;
}

/* ----------------------------------------------------
GUEST SECTION
---------------------------------------------------- */
.guests {
	margin:0 40px 40px 40px;
}
.guest-box {
	padding: 20px;
}
p.guestname {
	font-size: 1rem;
	margin: 15px 0 0 0;
}
.guesttitle {
	font-size: 0.8rem;
	margin-bottom:10px;
}

/* ----------------------------------------------------
SPECIAL SESSION SECTION
---------------------------------------------------- */

.sps  {
    margin-bottom: 20px;
	text-align: left;
	padding:10px 50px 0 50px;
}
.sps p {
	font-size: 1rem;
	line-height: 2.5rem;
}
.spss  {
    margin-bottom: 0;
	text-align: center;
	padding:0 40px;
}
.spss img {
	width: 350px;
}
.spss p {
	font-size: 1rem;
	line-height: 2.5rem;
}
.sp-box {
	padding: 30px;
}
.spBox {margin-bottom:20px;}

/* ----------------------------------------------------
ABOUT MOVIE SECTION
---------------------------------------------------- */
html.webp #about-section	{
	background: url(../images/bg_about.webp) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}
html.no-webp #about-section	{
	background: url(../images/bg_about.jpg) no-repeat #172847;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
    position: relative;
	text-align: center;
}
h3.aboutCopy {
	color: #FFEFB3;
	font-size: 1.4rem;
}
.logo_movie img {
	width: 310px;
	padding-bottom:40px;
}

/*-------------------------------------------------
MESSAGE SECTION
-------------------------------------------------*/
#form-section	{
	background: #0C122A;
	text-align: center;
}
.messageBox {padding: 0 80px;}
.messageCopy {
	margin-bottom:60px;
}
.messageCopy p {
	text-align: left;
}
/*-------------------------------------------------
	++ FORM 
-------------------------------------------------*/
.message { padding-bottom: 50px; }
.message .formAtt { margin: 20px 0; text-align: left; font-size: 18px; }
.message .sub-link { margin: 20px 0 80px 0; font-size: 20px; }
.message .sub-link a { margin: 0 20px; }
.message #form-notice { margin: 20px 0; padding: 0 80px; text-align: left; font-size: 18px; }
.message #form-notice .formAtt { margin-bottom: 20px; }
.message table { width: 100%; border-collapse: collapse; margin-bottom: 60px; }
.message table tr th { vertical-align: top; width: 35%; text-align: left; font-size: 14px; padding: 20px 0; }
.message table tr td { width: 65%; text-align: left; font-size: 14px; padding: 10px 0; }
.message.thanks { padding: 40px; }
.message.thanks h3 { font-size: 64px; font-weight: 700; margin-bottom: 15px; letter-spacing: 5px; }
.message.thanks .text { margin-top: 50px; font-size: 20px; letter-spacing: 2px; }

#hw-message input[type="text"], #hw-message input[type="password"], #hw-message input[type="tel"], #hw-message input[type="email"], #hw-message input[type="number"], #hw-message table textarea, #hw-message table select { width: 100%; border: 1px solid #647991; background: #0C122A; -webkit-appearance: none; padding: 1rem; border-radius: 0; font-size: 14px; }

#hw-message table textarea { height: 200px; }

#hw-message input:focus, #hw-message textarea:focus { outline: none; border: 1px solid #647991; }

#hw-message input[type="text"], #hw-message input[type="password"], #hw-message input[type="tel"], #hw-message input[type="email"], #hw-message input[type="number"] { vertical-align: top; }

#hw-message input[type="radio"] { display: none; }

#hw-message input[type="radio"] + label { padding-left: 30px; position: relative; margin-right: 30px; }

#hw-message input[type="radio"] + label::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #647991; border-radius: 50%; }

#hw-message input[type="radio"]:checked + label::after { content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; background: #647991; border-radius: 50%; }

.custom-selectbox { position: relative; }
.custom-selectbox .selectWrap { position: relative; }
.custom-selectbox .selectWrap:before, .custom-selectbox .selectWrap:after { content: ""; position: absolute; display: block; }
.custom-selectbox .selectWrap:after { top: 50%; right: 15px; margin-top: -3px; width: 0; height: 0; border: solid transparent; border-top-color: #647991; border-width: 7px 7px 0; }
.custom-selectbox select { z-index: 1; width: 100%; height: 60px; display: block; -webkit-appearance: none; border: 1px solid #647991; background-color: #0C122A; font-size: 14px; padding: 0 0 0 20px; }
.custom-selectbox select:focus { outline: none; border: 1px solid #647991; }

#button-area { margin-top: 60px; }

#form-submit, #form-reset { -webkit-appearance: none; border: 1px solid #fff; background: #0C122A; min-width: 180px; padding: 15px; border-radius: none; margin: 0 30px 10px 30px; font-size: 18px; font-weight: 600; cursor: pointer; color: #fff; }
#form-submit:hover, #form-reset:hover { opacity: .9; border: 1px solid #3F72BA; background: #3F72BA;}


@media screen and (max-width: 759px) { /*SP*/
  .messageBox {padding: 0 40px;}
  .message { padding-bottom: 5vw; }
  .message .formAtt { margin: 5vw 0; font-size: 2.8vw; }
  .message .sub-link { margin: 3vw 0 5vw 0; font-size: 3.8vw; }
  .message .sub-link a { margin: 0 3vw; }
  .message #form-notice { margin: 3vw 0; padding: 0; font-size: 2.4vw; }
  .message #form-notice .formAtt { margin-bottom: 3vw; }
  .message table { margin-bottom: 5vw; }
  .message table tr th { display: block; width: 100%; font-size: 2.8vw; padding: 3vw 0 0 0; }
  .message table tr td { display: block; width: 100%; text-align: left; font-size: 2.8vw; padding: 3vw 0; }
  .message.thanks { padding: 10vw 0; }
  .message.thanks h3 { font-size: 22px; margin-bottom: 3vw; letter-spacing: 2px; }
  .message.thanks .text { margin-top: 0; font-size: 16px; letter-spacing: 0; }
  #hw-message input[type="text"], #hw-message input[type="password"], #hw-message input[type="tel"], #hw-message input[type="email"], #hw-message input[type="number"], #hw-message table textarea, #hw-message table select { font-size: 16px; }
  #hw-message input[type="radio"] + label { padding-left: 5vw; margin-right: 5vw; font-size: 2.8vw; }
  #hw-message input[type="radio"] + label::before { width: 4vw; height: 4vw; }
  #hw-message input[type="radio"]:checked + label::after { width: 4vw; height: 4vw; }
  .custom-selectbox { position: relative; }
  .custom-selectbox .selectWrap { position: relative; }
  .custom-selectbox .selectWrap:before, .custom-selectbox .selectWrap:after { content: ""; position: absolute; display: block; }
  .custom-selectbox .selectWrap:after { top: 50%; right: 15px; margin-top: -3px; width: 0; height: 0; border: solid transparent; border-top-color: #fff; border-width: 7px 7px 0; }
  .custom-selectbox select { height: auto; }
  #button-area { margin-top: 10vw; }
  #form-submit, #form-reset { min-width: 30vw; padding: 3vw 6vw; margin: 0 3vw; font-size: 3.2vw; margin-bottom: 5vw; } }


/* ----------------------------------------------------
FOOTER
---------------------------------------------------- */
footer  {
    padding: 4rem 0 4rem;
    color: #000;
	background: #0C122A;
}


.text-md-right p {
	text-align: right;
	font-weight:normal;
	letter-spacing: normal;
}


.nav-btn {
    width: 40px;
    height: 40px;
    display: block;
    font-size: 1.8rem;
    line-height: 40px;
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 0;
    color: #fff;
    background: #415C93;
    cursor: pointer;
    z-index: 1100;
}

.nav-btn:hover, nav-btn:focus {
    color: #fff;
    background: #3f72BA;
}
hr {
  background: #647991;
  height: 1px;
  border: 0;
  margin-right: 0;
  margin-left: 0;
}

/* ----------------------------------------------------
WAYPOINTS
---------------------------------------------------- */
.wp1, 
.wp2, 
.wp3, 
.wp4, 
.wp5, 
.wp6	{
    visibility: hidden;
}

.bounceInLeft, 
.bounceInRight, 
.fadeInUp, 
.fadeInUpDelay, 
.fadeInDown, 
.fadeInUpD, 
.fadeInLeft, 
.fadeInRight {
    visibility: visible;
}


.delay-05s {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.delay-1s {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.delay-15s {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}



/* ----------------------------------------------------
RETINA/HIDPI
---------------------------------------------------- */


@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px) {
    #header   {
        height: 200px;
    }
    #logo   {
        width: 100%;
    }
	section {
    	padding: 2rem 0 2rem;
	}
    .section-title	{
        font-size: 3rem;
    }
		.masonry-item {
			width: 100%;
		}
	footer {
			text-align: center;
		}
	footer .text-md-right p {
	text-align: center!important;
	font-weight:normal;
	letter-spacing: normal;
	}
	#logo img.toplogo  {
		max-width: 80%;
			margin-top:100px;
		}
		.onairdate img {
			max-width: 80%;
		}
		.navigator h3 {
		text-align: center;
		}
		.navBox {margin:0 20px 0 20px;}
		.guests {
		margin:0 20px 20px 20px;
		}
		.guest {
		padding: 1.2rem;
		}
		.guest-box {
		padding: 10px;
		}
		p.guestname {
		font-size: 1.2rem;
		}
		.guesttitle {
		font-size: 1rem;
		}
.sps  {
    margin-bottom: 20px;
	text-align: left;
	padding:20px 20px 0 20px;
}
.sps p {
	font-size: 1rem;
	line-height: 2.5rem;
}
.spss  {
    margin-bottom: 0;
	text-align: center;
	padding:0 40px;
}
.spss img {
	width: 350px;
}
.spss p {
	font-size: 1rem;
	line-height: 2.5rem;
}
.sp-box {
	padding: 30px;
}
.spBox img {width:80%;margin-top:20px;}
.pcbr{display: none;}
}


/* ----------------------------------------------------
MEDIA QUERIES FOR FONT ROOT SIZE
---------------------------------------------------- */
@media (max-width: 62em)	{
    html	{
        font-size:15px;
    }
}
@media (max-width: 43.75em)	{
    html	{
        font-size:13px;
    }
}

/* ----------------------------------------------------
MEDIA QUERIES
---------------------------------------------------- */
@media screen and (max-width:1024px) {
    .equal-height-col.row	{
        display: block;
    }
    .equal-height-col.row [class*="col-"] {
        float: left;
        display: inline-block;
    }
    section	{
        position: relative;
        padding: 80px 0;
    }
    .wp1, .wp2, .wp3, .wp4, .wp5, .wp6,
    .wp7, .wp8, .wp9, .wp10, .wp11, .wp12,
    .wp13, .wp14, .wp15	{
        visibility: visible;
    }
    .bounceInLeft, 
    .bounceInRight, 
    .fadeInUp, 
    .fadeInUpDelay, 
    .fadeInDown, 
    .fadeInUpD, 
    .fadeInLeft, 
    .fadeInRight {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
    #header	{
        background-attachment: scroll;
		background-size: cover;
		background-position: center;
    }
    body.thanks #header	{
        background-attachment: scroll;
		background-size: auto;
		background-position: center;
    }
    .masonry-item {
        width: 50%;
    }
}
@media screen and (max-width:1024px) {
    span[data-pin-log]
    {
	display: none;
	}
}

@media screen and (max-width: 1280px){
  html.webp header,
  html.webp #introduction-section,
  html.webp #navigator-section,
  html.webp #about-section
	{
    height: 100%;
    background-attachment: scroll;
  }
    .guests {
	margin:0 20px 40px 20px;
	}
    .guest-box {
	padding: 5px;
	}
}
@media screen and (min-width: 768px){
	.spbr{
		display: none;
	}
	body.thanks header
	{
    height: 70%;
    background-attachment: scroll;
  }
}