* {
  position: relative;
}
html {
  position: relative;
  width: 100%;
  min-height: 100%;
}

body {
  width: 100%;
  min-height: 100%;

	-webkit-text-size-adjust: 100%;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('/special/about_tmam/assets/fonts/Noto_Sans_JP/NotoSansJP-Regular.woff') format("woff");
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('/special/about_tmam/assets/fonts/Noto_Sans_JP/NotoSansJP-Medium.woff') format("woff");
    font-weight: 500;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('/special/about_tmam/assets/fonts/Noto_Sans_JP/NotoSansJP-Black.woff') format("woff");
    font-weight: 700;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('/special/about_tmam/assets/fonts/Noto_Sans_JP/NotoSansJP-Bold.woff') format("woff");
    font-weight: 900;
}

@font-face {
    font-family: 'Noto Serif JP';
    src: url('/special/about_tmam/assets/fonts/Noto_Serif_JP/NotoSerifJP-Medium.woff') format("woff");
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/special/about_tmam/assets/fonts/Roboto_Condensed/RobotoCondensed-Regular.woff') format("woff");
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url('/special/about_tmam/assets/fonts/Roboto/Roboto-Black.woff') format("woff");
    font-weight: 900;
}

/*階層
---------------------------------------------------------------------------------------*/

header{ z-index: 500; }
.cnt05-copy{ z-index: 399; }
footer{ z-index: 400; }

/*背景
---------------------------------------------------------------------------------------*/

body:before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.morning:before {
  background: #c8d9e1 url("/special/about_tmam/assets/img/bg-m.jpg") no-repeat 50%;
  background-size: cover;
}
body.noon:before {
  background: #cddce6 url("/special/about_tmam/assets/img/bg-nn.jpg") no-repeat 50%;
  background-size: cover;
}
body.afternoon:before {
  background: #fce0bd url("/special/about_tmam/assets/img/bg-e.jpg") no-repeat 50%;
  background-size: cover;
}
body.night:before {
  background: #98a8b5 url("/special/about_tmam/assets/img/bg-n.jpg") no-repeat 50%;
  background-size: cover;
}

/* IE11 */
@media all and (-ms-high-contrast: none){
    
body.morning:before, body.noon:before, body.afternoon:before, body.night:before{
    background: none;
}

body.morning {
  background: inherit;
  background: url("/special/about_tmam/assets/img/bg-m.jpg") no-repeat 50% fixed;
  background-size: cover;
}

body.noon {
  background: inherit;
  background: url("/special/about_tmam/assets/img/bg-nn.jpg") no-repeat 50% fixed;
  background-size: cover;
}

body.afternoon {
  background: inherit;
  background: url("/special/about_tmam/assets/img/bg-e.jpg") no-repeat 50% fixed;
  background-size: cover;
}

body.night {
  background: inherit;
  background: url("/special/about_tmam/assets/img/bg-n.jpg") no-repeat 50% fixed;
  background-size: cover;
}

}

@media screen and (max-width:540px) {

body.morning:before {
  background: #c8d9e1 url("/special/about_tmam/assets/img/sp-bg-m.jpg") no-repeat 50%;
  background-size: cover;
}

body.noon:before {
  background: #c8d9e1 url("/special/about_tmam/assets/img/sp-bg-nn.jpg") no-repeat 50%;
  background-size: cover;
}

body.afternoon:before {
  background: #c8d9e1 url("/special/about_tmam/assets/img/sp-bg-e.jpg") no-repeat 50%;
  background-size: cover;
}

body.night:before {
  background: #c8d9e1 url("/special/about_tmam/assets/img/sp-bg-n.jpg") no-repeat 50%;
  background-size: cover;
}

}

/*フォント
---------------------------------------------------------------------------------------*/

p, li{
     font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}

.mincho{
     font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}

p.tx-std{
    font-size: 15px;
    line-height: 1.5em;
    color: #231815;
    margin-bottom: 1.5em;
}

p.tx-std span{
    color: #0040a3;
    font-weight: bold;
}


/*ボタン
---------------------------------------------------------------------------------------*/

p.bt-nw a{
    font-size: 13px;
    color: #231815;
    padding-left: 22px;
  transition: all .8s ease;
}

p.bt-std a{
    font-size: 13px;
    color: #231815;
    padding-left: 22px;
  transition: all .8s ease;
}

p.bt-nw a:before, p.bt-std a:before{
  content: url("/special/about_tmam/assets/img/bt-arrow1.png");
  position: absolute;
  width: 12px;
  height: 20px;
  display: inline-block;
  left: 0;
  top: -2px;
  transition: all .8s ease;
}

p.bt-nw a:after{
  content: url("/special/about_tmam/assets/img/bt-nw.png");
  position: absolute;
  width: 12px;
  height: 20px;
  display: inline-block;
  right: -20px;
  top: 0px;
}

p.bt-std a:hover, p.bt-nw a:hover{
    color:#FF4F00;
}

p.bt-nw a:hover:before, p.bt-std a:hover:before{
  left: 5px;
}

@media screen and (max-width:540px) {

    
}

/*基本レイアウト
---------------------------------------------------------------------------------------*/

.xct-l{
}

.xct-r{
}

.cnt-line{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #231815;
}

.item-wrap{
    position: relative;
    width: 100%;
}

/* Jストリームプレイヤー
---------------------------------------------------------------------------------------*/

.video-tmam-qualit{
    z-index: 9999;
}

.jstream-video-thumb img {
	width: 100%;
}

.jstream-video-thumb-play {
	position: relative;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
}
.jstream-video-thumb-play:after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px;
	background: url("/special/about_tmam/assets/img/thumb/play.png") no-repeat 50% 50% / cover;
}

.jstream-video-container {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .6);

	opacity: 0;
	transition: opacity .5s ease-in-out;
}
.jstream-video-container.active {
	display: flex;
	justify-content: center;
	align-items: center;
}
.jstream-video-container.in {
	opacity: 1;
}

.jstream-video-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.jstream-video-inner {
	position: relative;
	z-index: 1;
	width: 0;
	height: 0;
	background: #000;
	transition: width .5s ease-in-out, height .5s ease-in-out;
}
.jstream-video-container.in .jstream-video-inner {
	width: 100vw;
	height: 56.25vw;
}
@media (min-width: 641px) {
	.jstream-video-container.in .jstream-video-inner {
		width: 640px;
		height: 360px;
	}
}

.jstream-video-close {
	position: absolute;
	right: 0;
	bottom: 100%;
	font-family: "Arial", "Geneva", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
	text-decoration: underline;
	text-shadow: 0 0 2px rgba(0, 0, 0, .5);
	color: #fff;
	cursor: pointer;

	opacity: 0;
	transition: opacity .2s linear;
}
.jstream-video-container.in .jstream-video-close {
	opacity: 1;
	transition: opacity .2s .5s ease-in-out;
}

/*ヘッダー
---------------------------------------------------------------------------------------*/

header{
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    padding: 21px 75px 0px 30px;
	top: 0;
	left: 0;
	right: 0;
	left: env(safe-area-inset-left);
	right: env(safe-area-inset-right);
}

header div.hd-wrap{
    position: relative;
    width: 100%;
    max-width: 1230px;
    margin: auto;
}

/*時間切り替え*/
div.hd-mark{
    position: absolute;
    width: 110px;
    background: url("/special/about_tmam/assets/img/hd-logo-m.png") no-repeat;
    background-size: 110px;
}

body.night div.hd-mark{
    background: url("/special/about_tmam/assets/img/hd-logo-n.png") no-repeat;
    background-size: 110px;
}

header div.hd-wrap h1{
    position: absolute;
    width: 144px;
    right: 0;
}

h1{
    position: absolute;
    right: 0;
    top:17px;
    width: 144px;
}

.gnavi{
    position: absolute;
    right: 0px;
    top:49px;
    overflow: hidden;
}

.gnavi ul{
    position: relative;
    margin-left: auto;
}

.gnavi li{
    position: relative;
    display: inline-block;
    font-size: 15px;
    padding: 0 9px;
    border-right: solid 2px #FFFFFF;
    line-height: 1;
}

.gnavi li:last-child{
    border-right: none;
}

.gnavi li a{
    color: #FFF;
  transition: all .8s ease;
}

.gnavi li a:hover{
    color:#FF4F00;
}


@media screen and (max-width:1100px) {

.gnavi{
    display: none;
}

}

/* スマートフォン用のメニューとアニメーション */
.sp-nav-wrap {
	position: fixed;
	z-index: 501;
	top: 0;
	left: 0;
	right: 0;
	left: env(safe-area-inset-left);
	right: env(safe-area-inset-right);
	height: 0;
	padding: 0 8px;
	text-align: right;
	overflow: visible;
	cursor: pointer; /* iOS でクリック可能にする */

	opacity: 0;
	transition: opacity .4s ease-in-out, padding .4s linear;
}
.js-sp-nav-active .sp-nav-wrap {
	height: 100vh;
	padding-top: 8px;
	padding-bottom: 8px;
	opacity: 1;
	transition-duration: .2s;
}
@media (min-width: 1101px) {
	.sp-nav-wrap { display: none; }
}
.sp-nav-wrap > * {
	cursor: default;
}

.sp-nav {
	display: inline-block;
	width: 60%;
	min-width: 300px;
	padding: 3px;
	text-align: left;
	background: #1f5b9f;
}

.sp-nav > li + li {
	margin-top: 3px;
}

.sp-nav-item {
	position: relative;
	display: block;
	padding: 0 50px;
	line-height: 0;
	color: #000;
	background: #fff;
	overflow: hidden;
	opacity: 0;
	transition: all .4s ease-in-out;
}
.js-sp-nav-active .sp-nav-item {
	padding-top: 1em;
	padding-bottom: 1em;
	line-height: 1.2;
	opacity: 1;
}
:nth-child(2) > .sp-nav-item { transition-delay: 50ms; }
:nth-child(3) > .sp-nav-item { transition-delay: 100ms; }
:nth-child(4) > .sp-nav-item { transition-delay: 150ms; }
:nth-child(5) > .sp-nav-item { transition-delay: 200ms; }
:nth-child(6) > .sp-nav-item { transition-delay: 250ms; }
:nth-child(7) > .sp-nav-item { transition-delay: 300ms; }

.sp-nav-item:before {
	/* メニュー項目のアイコン */
	content: ">";
	display: block;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -12px;
	font-size: 24px;
	font-weight: 100;
	line-height: 1;
	transform: rotate(90deg) scaleX(.7);
}

.sp-nav-close {
	/* メニューを閉じるアイコンは「×」の文字で仮に表現してあります */
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 40px;
	font-weight: 100;
	line-height: 1;
	text-align: center;
	color: #8eacce;
	background: #1f5b9f;
	border: none;
	cursor: pointer;

	opacity: 0;
	transform: scale(0);
	transition: transform .4s cubic-bezier(.5,.01,.81,1.25), opacity .4s ease-in-out;
}
.js-sp-nav-active .sp-nav-close {
	opacity: 1;
	transform: none;
}

@media screen and (max-width:540px) {
    
header{
    width: 100%;
    height: 70px;
    background-size: 230%;
}

/*スマートフォン*/
body.morning header{
    background: url("/special/about_tmam/assets/img/sp-bg-m.jpg") top center no-repeat;
}
body.noon header{
    background: url("/special/about_tmam/assets/img/sp-bg-nn.jpg") top center no-repeat;
}
    
body.afternoon header{
    background: url("/special/about_tmam/assets/img/sp-bg-e.jpg") top center no-repeat;
}
    
body.night header{
    background: url("/special/about_tmam/assets/img/sp-bg-n.jpg") top center no-repeat;
}

}
    
/*フッター
---------------------------------------------------------------------------------------*/

footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    display: block;
}
footer,
.ft-wrap{
	height: 30px;
	height: calc(30px + env(safe-area-inset-bottom));
}

.morning footer, .noon footer{
    background: linear-gradient(-90deg, #00449a, #00a6e9);
}

.afternoon footer{
    background: linear-gradient(-90deg, #eb6400, #fbc600);
}
.night footer{
    background: linear-gradient(-90deg, #433f3e, #b4b4b5);
}

.cnt05-copy{
    box-sizing: border-box;
    padding: 8px 20px;
    width: 100%;
    bottom: -60px;
    opacity: 0;
    background: rgba(0,0,0,0.5);
}

.cnt05-w{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cnt05-copy p{
    color: #FFFFFF;
    font-size: 10px;
}

.cnt05-copy .xct-l{
    position: relative;
    width: 60%;
    float: left;
}

.cnt05-copy .xct-r{
    position: relative;
    width: 40%;
    text-align: right;
}

/* Edge 1 */
@supports (-ms-ime-align: auto) {
header{ width: calc(100% - 16px); }
footer{ width: calc(100vw - 16px); }
.cnt05-copy{ width: calc(100vw - 16px); }
}
	
/* safari */
_::-webkit-full-page-media, _:future, :root header{ width: calc(100% - 0px); }
_::-webkit-full-page-media, _:future, :root footer{ width: calc(100vw - 0px); }
_::-webkit-full-page-media, _:future, :root .cnt05-copy{  width: calc(100vw - 0px); }

.ft-wrap{
    position: relative;
    width: 100%;
    display: block;
}

.ft-tx{
    position: absolute;
    top: 50%;
    right: 96px;
    width: 143px;
    height: 30px;
	margin-top: -15px;
}

.ft-mark{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 96px;
    height: 30px;
}

.morning div.ft-mark, .noon div.ft-mark{
    background:url("/special/about_tmam/assets/img/ft-mark-m.png");
    background-size: 96px;
}

.afternoon div.ft-mark{
    background:url("/special/about_tmam/assets/img/ft-mark-an.png");
    background-size: 96px;
}
.night div.ft-mark{
    background:url("/special/about_tmam/assets/img/ft-mark-n.png");
    background-size: 96px;
}


@media screen and (max-width:1100px) {

header{
    width: calc(100% - 0px);
    padding: 10px 10px 0px 0px;
}
  
div.hd-mark{
    width: 90px;
    background-size: 90px;
}
body.night div.hd-mark{
    background-size: 90px;
}
    
header div.hd-wrap h1{
    position: absolute;
    width: 360px;
    right:auto;
    left:80px;
    top:4px;
}

    
footer{
    width: calc(100% - 0px);
}

.cnt05-copy{
    position: relative;
    display: block;
    width: calc(100% - 0px);
    margin-top: 80px;
}


.cnt05-w{
    display: block;
    justify-content:center;
    align-items: center;
}

.cnt05-copy .xct-l, .cnt05-copy .xct-r{
    box-sizing: border-box;
    width: 100%;
    float: none;
    text-align: center;
    padding: 10px;
}

}

@media screen and (max-width:640px) {

body.morning div.hd-mark, body.noon div.hd-mark{
    background: url("/special/about_tmam/assets/img/hd-logo-n.png") no-repeat;
    background-size: 90px;
}
    
}



@media screen and (max-width:540px) {

div.hd-mark{
    width: 60px;
    background-size: 60px;
}

body.night div.hd-mark{
    background-size: 60px;
}
    
header div.hd-wrap h1{
    position: absolute;
    width: 230px;
    right:auto;
    left:55px;
    top:5px;
}

body.morning div.hd-mark, body.noon div.hd-mark{
    background: url("/special/about_tmam/assets/img/hd-logo-n.png") no-repeat;
    background-size: 60px;
}

}

@media screen and (max-width:320px) {
    
header div.hd-wrap h1{
    position: absolute;
    width: 200px;
    right:auto;
    left:55px;
    top:5px;
}

}


/*コンテンツ
---------------------------------------------------------------------------------------*/

@media (min-width: 1101px) {
	html {
        scroll-snap-type: mandatory;
        scroll-snap-points-y: repeat(100vh);
        -ms-scroll-snap-type: mandatory;
        -ms-scroll-snap-points-y: repeat(100vh);
        -webkit-scroll-snap-type: mandatory;
        -webkit-scroll-snap-points-y: repeat(100vh);
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
	}
	.safari {
        scroll-snap-type: none;
	}
	.cnt05-copy{
		position: fixed;
	}
}

article {
    box-sizing: border-box;
    position: relative;
        width: 100%;
        height: 100vh;
        scroll-snap-align: start;
    overflow: hidden;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

article.cnt-start-block{
    text-align: center;
    color: #FFFFFF;
}
/*時間切り替え*/

.noon article.cnt-start-block{
    color: #004c9c;
}
.afternoon article.cnt-start-block{
    color: #3f6a7b;
}



article div.cnt-start-tx1{
    position: absolute;
	z-index: 1;
    left: 0;
    right: 0;
    height: 190px;
    top: 34%;
}

.bt-next{
    position: absolute;
    left: 0;
    right: 0;
    bottom:1%;
    margin: auto;
    width: 36px;
    height: 27px;
}

.bt-next a{
    position: relative;
    display: block;
    width: 36px;
    height: 27px;
    margin: auto;
    z-index: 100;
}


.bt-next span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: btnx 2s infinite;
  animation: btnx 2s infinite;
  opacity: 0.8;
  box-sizing: border-box;
    z-index: 50;
}

.afternoon .bt-next span{
  border-left: 1px solid #b16a5a;
  border-bottom: 1px solid #b16a5a;
}

.cnt-start-arrow{
    opacity: 0;
}


.cnt-start-arrow span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes btnx {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes btnx {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}


@media screen and (max-height:800px) {
article div.cnt-start-tx1{
    top: 30%;
    }
}

@media screen and (max-height:500px) {
article div.cnt-start-tx1{
    top: 20%;
    }
}

@media screen and (max-width:540px) {
article div.cnt-start-tx1{
    top: 35%;
    }
}

.cnt-start-tx1-box{
    position: relative;
    text-align: center;
    width: 100%;
    display: block;
    font-family: 'Noto Serif JP';
}

article.cnt-start-block div.op-tx1{
    display: block;
    font-size: 20px;
    font-family: 'Noto Serif JP';
    font-weight: 500;
    opacity: 0;
}

article.cnt-start-block div.op-tx2{
    display: block;
    font-size: 40px;
    font-family: 'Noto Serif JP';
    font-weight: 500;
    letter-spacing: 0.15em;
    opacity: 0;
}

article.cnt-start-block div.op-tx2 span{
    display: inline-block;
}

article.cnt-start-block p{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px;
}

section.cnt-block {
  position: relative;
  box-sizing: border-box;
  width: 1000px;
  height: 580px;
  margin: 140px auto 5vh;
    padding: 0;
    border-radius: 5px;
  z-index: 5;
    overflow: hidden;
}

@-moz-document url-prefix() {
	section.cnt-block {
    border-radius: 0px;
	}
}

section.cnt-block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	opacity: 1;
}
.morning section.cnt-block:before {
  background: rgba(200,217,225,.7) url("/special/about_tmam/assets/img/bg-m-n.jpg") no-repeat 50% 50% / cover fixed;
}
.noon section.cnt-block:before {
  background: rgba(205,220,230,.7) url("/special/about_tmam/assets/img/bg-nn-n.jpg") no-repeat 50% 50% / cover fixed;
}
.afternoon section.cnt-block:before {
  background: rgba(252,224,189,.7) url("/special/about_tmam/assets/img/bg-e-n.jpg") no-repeat 50% 50% / cover fixed;
}
.night section.cnt-block:before {
  background: rgba(152,168,181,.9) url("/special/about_tmam/assets/img/bg-n-n.jpg") no-repeat 50% 50% / cover fixed;
}
.ios section.cnt-block:before,
.safari section.cnt-block:before{
	background-image: none !important;
}
.edge section.cnt-block:before {
	background-color: transparent !important;
}

/* スマートフォン */
@media screen and (max-width:640px) {

.morning section.cnt-block:before {
	background-image: none !important;
}
.noon section.cnt-block:before {
	background-image: none !important;
}
.afternoon section.cnt-block:before {
	background-image: none !important;
}
.night section.cnt-block:before {
	background-image: none !important;
}
.edge section.cnt-block:before {
	background-color: rgba(152,168,181,.9) !important;
}

}

section.cnt-block h2{
    font-size: 25px;
    font-style: italic;
    color: #94a1aa;
    font-family: 'Roboto Condensed', sans-serif !important;
	font-weight: 400 !important;
}

/*時間切り替え*/

.afternoon section.cnt-block h2{
    color: #b16a5a;
}
.night section.cnt-block h2{
    color: #59738c;
}


section.cnt-block h2:first-letter {
    font-size: 27px;
}

section.cnt-block h3, section.cnt-block h4, section.cnt-block h5{
    font-family: 'Noto Sans JP', sans-serif;
}

section.cnt-block h3{
    font-size: 19px;
}

section.cnt-block h4{
    font-size: 18px;
    font-weight: 800;
}

section.cnt-block h5{
    font-size: 16px;
    font-weight: 800;
}

body#win{
    font-size: 300%;
}

@media screen and (max-width:1100px) {
    
article {
    height:auto;
    scroll-snap-align: none;
    overflow: auto;
}

article.cnt-start-block{
    box-sizing: border-box;
        width: 100%;
        height: 100vh;
        scroll-snap-align: start;
    overflow: hidden;
}

section.cnt-block {
  width: 90%;
}

    
.cnt-start-tx1-box{
    width: 80%;
    margin: 0 10%;
}

article.cnt-start-block div.op-tx1{
    font-size: 18px;
}
    
article.cnt-start-block div.op-tx2{
    font-size: 35px;
}

}


@media screen and (max-width:960px) {

section.cnt-block {
    width: 90%;
    height:auto;
    padding-bottom: 60px;
    margin: 90px auto 0px auto;
}  


#cnt05 section.cnt-block{
    padding-bottom: 30px;
}  

    .sp-box-tl{
        position: relative;
        width: 80%;
        margin: auto;
        border-top: 1px solid #231815;
        padding-top: 24px;
        opacity: 0;
    }

}


@media screen and (max-width:540px) {
    
section.cnt-block {
    width: 90%;
    height:auto;
    padding-bottom: 50px;
    margin: 70px auto 0px;
} 

#cnt05 section.cnt-block{
    padding-bottom: 20px;
}  

article.cnt-start-block div.op-tx1{
    font-size: 16px;
    margin-bottom: 10px;
}
    
article.cnt-start-block div.op-tx2{
    font-size: 28px;
    line-height: 1.3em;
}
    
}

/* スタート画面
---------------------------------------------------------------------------------------*/

article div.cnt-start-arrow{
    margin: 20px auto 0 auto;
}

.cnt-start-arrow a{
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    margin: auto;
    z-index: 100;
}
.cnt-start-arrow span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  box-sizing: border-box;
    z-index: 50;
}


/*時間切り替え*/

.noon .cnt-start-arrow span{
  border-left: 2px solid #004c9c;
  border-bottom: 2px solid #004c9c;
}
.afternoon .cnt-start-arrow span{
  border-left: 2px solid #3f6a7b;
  border-bottom: 2px solid #3f6a7b;
}


.cnt-start-arrow span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.cnt-start-arrow span:nth-of-type(2) {
  top: 22px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.cnt-start-arrow span:nth-of-type(3) {
  top: 44px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width:540px) {

.cnt-start-arrow span {
  width: 18px;
  height: 18px;
  margin-left: -9px;
}

.cnt-start-arrow span:nth-of-type(2) {
  top: 18px;
}
.cnt-start-arrow span:nth-of-type(3) {
  top: 36px;
}
}


/*コンテンツ１
---------------------------------------------------------------------------------------*/

.item1{
    position: absolute;
    top:12px;
    left: 19px;
    display: block;
    opacity: 0;
}

#cnt01 .item2{
    position: relative;
    width:81%;
    height: 175px;
    margin: 75px auto 0 auto;
}

#cnt01 .item2-1,#cnt01 .item2-2,#cnt01 .item2-3,#cnt01 .item2-4{
    position: absolute;
    width: 20.3%;
    height: 163px;
    background: url("/special/about_tmam/assets/img/page2-base.png");
    background-size:cover;
    background-repeat: no-repeat;
    text-align: center;
    display: block;
    opacity: 0;
}

#cnt01 .item2-1{
    left: 0%;
}

#cnt01 .item2-2{
    left: 26.5%;
}

#cnt01 .item2-3{
    left: 53.2%;
}

#cnt01 .item2-4{
    left: 79.6%;
}

#cnt01 .item2 h5{
    position: relative;
    display: block;
    font-size: 27px;
    margin: 0px auto 2px auto;
}

.ct1-atx1, .ct1-atx2, .ct1-atx3, .ct1-atx4{
    font-size: 43px;
    font-weight: 900;
    color: #0053a5;
    font-family: 'Roboto', sans-serif;
    margin-right: 3px;
}

.ct1-atx1n, .ct1-atx2n, .ct1-atx3n, .ct1-atx4n{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
}

#cnt01 .item2 h6{
    font-size: 15px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    margin: 32px auto 8px auto;
}

#cnt01 .item2-4 h6{
    margin: 18px auto 1px auto;
}
#cnt01 .item2 p{
    font-size: 11px;
    font-family: 'Noto Sans JP', sans-serif;
}

#cnt01 .item3{
    position: absolute;
    width: 328px;
    bottom:12.5%;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    text-align: center;
    opacity: 0;
}

#cnt01 .item3 h6{
    display: block;
    font-size: 15px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    margin-bottom: 14px;
}

.cnt01-movie{
    display: block;
    width: 328px;
    height: 185px;
}

@media screen and (max-width:960px) {

#cnt01 .item2{
    position: relative;
    width:370px;
    height: 400px;
    margin: 55px auto 0 auto;
}

#cnt01 .item2-1,#cnt01 .item2-2,#cnt01 .item2-3,#cnt01 .item2-4{
    position: relative;
    width: 165px;
    height: 163px;
    left: 0 !important;
    margin: 10px;
    float: left;
}

#cnt01 .item3{
    position: relative;
    width: 328px;
    bottom:auto!important;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    text-align: center;
    opacity: 0;
}
    
}

@media screen and (max-width:540px) {

#cnt01 .item2{
    position: relative;
    width:292px;
    height: 320px;
    margin: 45px auto 0 auto;
}

#cnt01 .item2-1,#cnt01 .item2-2,#cnt01 .item2-3,#cnt01 .item2-4{
    position: relative;
    width: 130px;
    height: 130px;
    left: 0 !important;
    margin: 8px;
    float: left;
}
    
#cnt01 .item2 h5{
    position: relative;
    display: block;
    font-size: 24px;
    margin: 0px auto 2px auto;
}

.ct1-atx1, .ct1-atx2, .ct1-atx3, .ct1-atx4{
    font-size: 36px;
}

#cnt01 .item2 h6{
    font-size: 15px;
    margin: 28px auto 6px auto;
    line-height: 1.2em;
}

#cnt01 .item2-4 h6{
    margin: 13px auto 1px auto;
}


#cnt01 .item3{
    position: relative;
    width: 270px;
}

.cnt01-movie{
    width: 270px;
    height: 152px;
}

}

@media screen and (max-width:440px) {

#cnt01 .item2{
    width:280px;
    height: 300px;
    margin: 45px auto 0 auto;
}

#cnt01 .item2-1,#cnt01 .item2-2,#cnt01 .item2-3,#cnt01 .item2-4{
    width: 124px;
    height: 124px;
    margin: 8px;
}
}

    
/*コンテンツ２
---------------------------------------------------------------------------------------*/

#cnt02 .xct-l{
    position: relative;
    box-sizing: border-box;
    width: 88.3%;
    margin-top:125px;
    left: 8%;
    opacity: 0;
}

#cnt02 .xct-r{
    position: relative;
    box-sizing: border-box;
    width: 88.3%;
    left: 8%;
    opacity: 0;
}

#cnt02 .xct-l div.cnt-box{
    position: relative;
    width: calc(100% - 460px);
    padding-right: 4%;
    float: left;
}

#cnt02 .xct-r div.cnt-box{
    position: relative;
    width: calc(100% - 460px);
    padding-right: 4%;
    float: left;
}

#cnt02 .item2{
    position: relative;
    width: 356px;
    height: 230px;
    margin: -88px 22px auto auto;
    float: right;
}

#cnt02 .item3{
    position: relative;
    width: 400px;
    height: 300px;
    margin: -60px 0px auto auto;
    float: right;
}

#cnt02 .item2a{
    position: absolute;
    height: 220px;
    opacity: 0;
}

#cnt02 .item2b{
    position: absolute;
    opacity: 0;
}

#cnt02 .item2c{
    position: absolute;
    opacity: 0;
}

#cnt02 h5.item2h{
    position: absolute;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    top:210px;
    right: 0;
    opacity: 0;
}

#cnt02 .item3a{
    position: relative;
    width: 262px;
    opacity: 0;
    margin: auto;
    display: block;
}

#cnt02 .item3b{
    position: absolute;
    width: 262px;
    top:0;
    left:0;
    right: 0;
    margin: auto;
    opacity: 0;
}

#cnt02 .item3c{
    position: absolute;
    width: 262px;
    top:0;
    left:0;
    right: 0;
    margin: auto;
    opacity: 0;
}

#cnt02 h5.item3h{
    position: absolute;
    top:210px;
    right: 0;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    text-align: right;
    opacity: 0;
}

#cnt02 p.item3g{
    position: absolute;
    top:263px;
    right: 0;
    font-size: 9px;
    color: #FFFFFF;
    text-align: right;
    opacity: 0;
}


.thermometer-outer-v {
  height: 122px;
  width: 26px;
}
.thermometer-inner {
  background: #b7d1e2;
}
.thermometer-inner-h {
  height: 122px;
}
.thermometer-inner-v {
  width: 26px;
}

.thmr-data0{
    position: absolute;
    left:62px;
    bottom:50px;
    opacity: 0;
}

.thmr-data1{
    position: absolute;
    left:110px;
    bottom:50px;
    opacity: 0;
}

.thmr-data2{
    position: absolute;
    left:155px;
    bottom:50px;
    opacity: 0;
}
.thmr-data3{
    position: absolute;
    left:200px;
    bottom:50px;
    opacity: 0;
}
.thmr-data4{
    position: absolute;
    left:247px;
    bottom:50px;
    opacity: 0;
}

.thmr-data5{
    position: absolute;
    left:292px;
    bottom:50px;
    opacity: 0;
}

.thmr-data5 .thermometer-inner {
  background: #1b5b9c;
}

#cnt02 .cnt-tx-box1{
    opacity: 0;
}

#cnt02 .cnt-tx-box2{
    opacity: 0;
}

@media screen and (max-width:1100px) {

#cnt02 .xct-l div.cnt-box{
    width: calc(100% - 400px);
    padding-right: 0;
}

#cnt02 .xct-r div.cnt-box{
    width: calc(100% - 400px);
    padding-right: 0;
}
    
#cnt02 .item3{
    width: 356px;
    margin: -80px 0px auto auto;
}
    
}

@media screen and (max-width:960px) {

#cnt02 .xct-l{
    position: relative;
    box-sizing: border-box;
    width: 80%;
    left: auto !important;
    margin: 85px 10% 0 10%;
}

#cnt02 .xct-r{
    position: relative;
    box-sizing: border-box;
    width: 80%;
    left: auto !important;
    margin: 40px 10% 0 10%;
    padding-top: 30px;
    border-top: 1px solid #231815;
}

#cnt02 .xct-l div.cnt-box{
    position: relative;
    width: calc(100% - 0px);
    padding-right: 0%;
    float: none;
}

#cnt02 .xct-r div.cnt-box{
    position: relative;
    width: calc(100% - 0px);
    padding-right: 0%;
    float: none;
}
    
#cnt02 .item2{
    width: 356px;
    height: 230px;
    margin: auto;
    float: none;
}

#cnt02 .cnt-line{
    border: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

#cnt02 .item3{
    position: relative;
    width: 100%;
    height: 300px;
    margin: auto;
    float: none;
}
    
    

#cnt02 h5.item2h{
    position: relative;
    top: auto;
    right: auto;
    text-align: center;
    color: #000;
    font-size: 14px;
}
    
 #cnt02 .item3{
    height: auto;
}

#cnt02 .item3a{
    position: relative;
    top:0px;
}

#cnt02 .item3b{
    top:0px;
}

#cnt02 .item3c{
    top:0px;
}
    
#cnt02 h5.item3h{
    position: relative;
    top:auto;
    right: auto;
    font-size: 14px;
    color: #000;
    text-align: center;
    padding-top: 20px;
    margin-top: 0px;
    border-top: none;
}

#cnt02 p.item3g{
    position: relative;
    top:auto;
    right: auto;
    font-size: 12px;
    color: #000;
    text-align: left;
    margin-top: 20px;
}

}


@media screen and (max-width:540px) {

#cnt02 .item2{
    position: relative;
    width: 300px;
    height: 194px;
    margin: auto;
}

.thermometer-outer-v {
  height: 103px;
  width: 22px;
    }
.thermometer-inner-v {
  width: 22px;
}

.thmr-data0{
    position: absolute;
    left:52px;
    bottom:76px;
    opacity: 0;
}
	
.thmr-data1{
    position: absolute;
    left:91px;
    bottom:76px;
    opacity: 0;
}

.thmr-data2{
    position: absolute;
    left:129px;
    bottom:76px;
    opacity: 0;
}
.thmr-data3{
    position: absolute;
    left:167px;
    bottom:76px;
    opacity: 0;
}
.thmr-data4{
    position: absolute;
    left:209px;
    bottom:76px;
    opacity: 0;
}
.thmr-data5{
    position: absolute;
    left:247px;
    bottom:76px;
    opacity: 0;
}
    
}

@media screen and (max-width:400px) {

#cnt02 .item2{
    margin: auto auto auto -15px;
}
    
}
    
@media screen and (max-width:340px) {

#cnt02 .item2{
    margin-left: -30px;
}
    
#cnt02 .item3a{
    width: 262px;
    left:-15px;
}

#cnt02 .item3b{
    width: 262px;
    left:-15px;
    right: auto;
}

#cnt02 .item3c{
    width: 262px;
    left:-15px;
    right: auto;
}

}



/*コンテンツ３
---------------------------------------------------------------------------------------*/

#cnt03 .yct-s{
    position: absolute;
    box-sizing: border-box;
    width: 42%;
    top:20%;
    left: 0;
    right: 0;
    height: 400px;
    margin: auto;
}

#cnt03 .item2{
    position: relative;
    width: 68%;
    height: 95.2px;
    margin: 0 auto 65px auto; 
}

#cnt03 .item2-1, #cnt03 .item2-2{
    position: absolute;
    top:0;
    opacity: 0;
}

#cnt03 .item2-3{
    position: relative;
    opacity: 0;
}

#cnt03 .item3{
    position: absolute;
    top:38%;
    opacity: 0;
}


@media screen and (max-width:960px) {

#cnt03 .yct-s{
    position: relative;
    width: 80%;
    top:auto;
    left: 0;
    right: 0;
    height: auto;
    margin: 55px 10% 0 10%
}

#cnt03 .item2{
    position: relative;
    width: 50%;
    height: auto;
    margin: 0 auto 30px auto;
}

#cnt03 .item3{
    position: relative;
    top: 0 !important;
}    
    
}


@media screen and (max-width:640px) {

#cnt03 .item2{
    width: 70%;
}

}

/*コンテンツ４
---------------------------------------------------------------------------------------*/

#cnt04 .yct-s{
    position: absolute;
    box-sizing: border-box;
    width: 41.5%;
    top:15%;
    left: 0;
    right: 0;
    height: 400px;
    margin: auto;
}

#cnt04 .item2{
    width: 80%;
    margin: 0 auto 42px auto;
    opacity: 0;
}

#cnt04 .bt-std{
    margin-top: 50px;
}

#cnt04 .item3{
    position: absolute;
    top:62%;
    opacity: 0;
}

@media screen and (max-width:960px) {

#cnt04 .yct-s{
    position: relative;
    width: 80%;
    top:auto;
    left: 0;
    right: 0;
    height: auto;
    margin: 55px 10% 0 10%
}

#cnt04 .item2{
    width: 65%;
    margin: 0 auto 30px auto;
}

#cnt04 .item3{
    position: relative;
    top:0 !important;
    opacity: 0;
}

#cnt04 .bt-std{
    margin-top: 0px;
}
    
}

@media screen and (max-width:640px) {

#cnt04 .item2{
    width: 90%;
    padding-top: 15px;
}
}

/*コンテンツ５
---------------------------------------------------------------------------------------*/

#cnt05 .xct-l{
    position: relative;
    box-sizing: border-box;
    width: 88.3%;
    margin-top:110px;
    left: 8%;
    opacity: 0;
}

#cnt05 .xct-r{
    position: relative;
    box-sizing: border-box;
    width: 88.3%;
    left: 8%;
    opacity: 0;
}

#cnt05 .xct-l div.cnt-box{
    position: relative;
    width: calc(100% - 560px);
    padding-right: 15%;
    float: left;
}

#cnt05 .xct-r div.cnt-box{
    position: relative;
    width: calc(100% - 560px);
    padding-right: 15%;
    float: left;
}

#cnt05 p.tx-std:first-child{
    margin-bottom: 15px;
}

#cnt05 div.item2{
    position: absolute;
    width: 520px;
    height: 190px;
    margin: 0px 22px auto auto;
    top:-25px;
    right: 20px;
}

#cnt05 h5.item2h{
    position: absolute;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    right: 0;
    opacity: 0;
}

#cnt05 .item2a{
    position: absolute;
    width: 33.7%;
    top:10.8%;
    left: 25%;
    opacity: 0;
}

#cnt05 .item2b{
    position: absolute;
    width: 5%;
    top:52px;
    left: 60.5%;
    opacity: 0;
}

#cnt05 .item2c{
    position: absolute;
    width: 33.7%;
    top:10.8%;
    left: 67%;
    opacity: 0;
}

#cnt05 div.item3{
    position: absolute;
    width: 510px;
    height: 270px;
    margin: 0px 22px auto auto;
    top:-5px;
    right: 20px;
}

#cnt05 h5.item3h{
    position: absolute;
    right: 0;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    opacity: 0;
}

#cnt05 .item3a, #cnt05 .item3b, #cnt05 .item3c, #cnt05 .item3d, #cnt05 .item3e{
    position: absolute;
    width: 99.3%;
    top:9%;
    left: 3%;
    opacity: 0;
}

#cnt05 div.item2 div.item-wrap{
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width:1100px) {

#cnt05 .xct-l div.cnt-box{
    width: calc(100% - 460px);
    padding-right: 0%;
}

#cnt05 div.item3{
    top:-20px;
}
}

@media (min-width:961px) {
	#cnt05 div.item2 div.item-wrap{
		height: 190px;
	}

	#cnt05 div.item3 div.item-wrap{
	    height: 270px;
	}
}

@media screen and (max-width:960px) {

#cnt05 .xct-l{
    position: relative;
    box-sizing: border-box;
    width: 80%;
    left: auto !important;
    margin: 85px 10% 0 10%;
}

#cnt05 .xct-r{
    position: relative;
    box-sizing: border-box;
    width: 80%;
    left: auto !important;
    margin: 40px 10% 0 10%;
    padding-top: 30px;
    border-top: 1px solid #231815;
}

#cnt05 .xct-l div.cnt-box{
    position: relative;
    width: calc(100% - 0px);
    padding-right: 0%;
    float: none;
}

#cnt05 .xct-r div.cnt-box{
    position: relative;
    width: calc(100% - 0px);
    padding-right: 0%;
    float: none;
}
    
#cnt05 div.item2{
    width: 100%;
    height: auto;
    margin: auto;
    top:auto;
    right: auto;
}

#cnt05 .cnt-line{
    border: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}

#cnt05 div.item3{
    position: relative;
    width: 100%;
    height: auto;
    margin: 15px auto auto auto;
    top:auto;
    right: auto;
}
    
#cnt05 .item3a, #cnt05 .item3b, #cnt05 .item3c, #cnt05 .item3d, #cnt05 .item3e{
    width: 100%;
    top:0 !important;
    left:0 !important;
}
    
    #cnt05 .item3a{
        position: relative;
    }

#cnt05 h5.item2h{
    position: relative;
    top:auto;
    right: auto;
    font-size: 14px;
    color: #000;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 15px;
    margin-top: 0px;
    border-top: none;
}    

#cnt05 h5.item3h{
    position: relative;
    top:auto;
    right: auto;
    font-size: 14px;
    color: #000;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 15px;
    margin-top: 0px;
    border-top: none;
}

#cnt05 div.item2{
    position: relative;
    height: auto;
}

#cnt05 .item2a{
    position: relative;
    width: 60%;
    top:auto;
    left: 0;
    right: 0;
    margin: auto;
}

#cnt05 .item2b{
    position: relative;
    width: 15%;
    top:auto;
    left: 0;
    right: 0;
    margin: auto;
}

#cnt05 .item2c{
    position: relative;
    width: 60%;
    top:auto;
    left: 0;
    right: 0;
    margin: auto;
}
    
}




#nav-toggle {
    display: none;
}

@media screen and (max-width:1100px) {
	#nav-toggle {
		display: block;
		position: fixed;
		box-sizing: border-box;
		top: 18px;
		right: 20px;
		right: calc(env(safe-area-inset-right) + 20px);
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 500;
	}

    
    .md-menu{
        position: relative;
        width: 100%;
        display: block;
    }
    
.hd-menu-box{
    display: none;
    box-sizing: border-box;
    position:fixed;
    bottom: 0;
    width: 100%;
    background: #000000;
    text-align: center;
    z-index:1500;
}

li.next-trn a, li.next-trn a:hover {
    background: #333 !important;
    color: #B3B3B3 !important;
}
}

@media screen and (max-width:540px) {
	#nav-toggle {
		top: 6px;
		right: 8px;
		right: calc(env(safe-area-inset-right) + 8px);
	}   
}

.preview-item{
    display: none;
}