@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400&display=swap');

/*================================

default

================================*/

html,body {
	-webkit-text-size-adjust: none;
	position: relative;
	}

body{
	font-family: futura-pt,'Noto Sans JP',"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 1em;
	text-decoration: none;
                letter-spacing: .05em;
	margin: 0;
	padding: 0;
	color: #222;
	background-color: #fff;
	}
@media screen and (max-width: 768px) {
body{
	font-size: 15px;
                min-width: 100%;
	}
	}
	  
ol, ul {
	list-style: none;
	}

:focus {
	outline: 0;
	}

a:focus{
	outline: none;
	}

a.bodylink{
                color: #000;
                font-weight: bold;
                text-decoration: underline;
                }
a:hover.bodylink{
                color: #999;
                }

a.bodylink:before{
	content: "";
	display: inline-block;
                margin-left: .75em;
	}

a.bodylink:after{
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	background: url(/on/demandware.static/-/Sites-tmljp-storefront-catalog/default/staff%2Dstart%2Dimages/950215/link.svg) no-repeat;
	background-size: contain;
                margin-left: .25em;
                margin-right: .75em;
	}


h1,h2,h3,h4,h5,p,ul,li{
	margin: 0;
	padding: 0;
                font-size: 1em;
	}

div { zoom: 1; }

img{
	border: 0;
	margin: 0;
	width: 100%;
	vertical-align: bottom;
	}

a{
	color: #000;
	text-decoration: none;
	}

a:hover{
	color: #000;
	}

a img{
	-webkit-transition: opacity .6s;
	-moz-transition: opacity .6s;
	-o-transition: opacity .6s;
	-ms-transition: opacity .6s;
	transition: opacity .6s;
	}

a:hover img{
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: opacity .6s;
	-moz-transition: opacity .6s;
	-o-transition: opacity .6s;
	-ms-transition: opacity .6s;
	transition: opacity .6s;
	}

/*================================

display

================================*/

.ss-disphide{
	display: none;
	}

.ss-dispview{
	display: block;
	}

.ss-inline{
	display: inline;
	}

.ss-pconly{
	display: block;
	}

.ss-sponly{
	display: none;
	}

.ss-visibhide{
	visibility: hidden !important;
	}

.ss-visibview{
	display: visible !important;
	}

.ss-overflowhidden{
	overflow-y: hidden !important;
	}

.ss-pci{
	display: inline;
	}
.ss-spi{
	display: none;
	}
@media screen and (max-width: 768px) {
.ss-pci{
	display: none;
	}
.ss-spi{
	display: inline;
	}
	}

.ss-pc{
	display: block !important;
	
	}
.ss-sp{
	display: none  !important;
	}
@media screen and (max-width: 768px) {
.ss-pc{
	display: none  !important;
	}
.ss-sp{
	display: block  !important;
	}
	}

.ss-relative {
                position: relative;
                }


.ss-mtext{
                opacity: 0;
                }
.ss-mtext span{
                opacity: 0;
                }


.ss-fade{
                opacity: 0;
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-ms-transition: all 1s ease-in;
	transition: all 1s ease-in;
                }
.ss-fadein{
                opacity: 1;
                }


.ss-fadeUp{
                opacity: 0;
                transform: translate(0, 100px) scale(.9, .9) skew(1deg, -1deg);
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
                }
.ss-fadeUpIn{
                opacity: 1;
                transform: translate(0, 0) scale(1,1) skew(0, 0);
                }

.ss-x {
                width: 20px;
                }


/*================================

header

================================*/

header{
	position: fixed;
	width: 100%;
	height: 90px;
                top: 0;
                left: 0;
                display: flex;
                z-index: 1000;
                background-color: #fff;
	}
@media screen and (max-width: 768px) {
header{
	height: 50px;
	}
	}

header h1{
                position: relative;
                display: block;
                width: 8rem;
                height: 100%;
	}
header h1:after{
                display: none;
                position: absolute;
                top: 35px;
                right: 0;
	content: "";
	width: 1px;
	height: 1.3rem;
                background-color: #000;
	}
@media screen and (max-width: 768px) {
header h1{
                width: 6rem;
	}
header h1:after{
	height: 1rem;
                top: 19px;
	}
	}

header h1 a{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                font-size: 1.4em;
                font-weight: 400;
                letter-spacing: .1em;
                pointer-events: none;
	}

header div{
	box-sizing: border-box;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex: 1;
                height: 100%;
                font-size: 1em;
                font-weight: 300;
                padding-left: 2.5rem;
	}
@media screen and (max-width: 768px) {
header div{
                font-size: .8em;
                padding-left: 1.5rem;
                padding-top:.1rem;
	}
	}

header div:before{
	content:"|";
	position: absolute;
	font-size: 1em;
                top: clac(50%-.5em);
	left: 0;
                padding-top:.1rem;
	}

header div a p{
	position: relative;
                margin-top: .3rem;
                cursor: pointer;
	}
@media screen and (max-width: 768px) {
header div a p{
                margin-top: .1rem;
	}
	}

header div a p:before{
                content: '';
	position: absolute;
	left: 0%;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid #000;
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	}
header div a:hover p:before{
	width: 140%;
                transform: translateX(-15%);
	}

header h2{
                display: block;
                width: 12rem;
                height: 100%;
	}
@media screen and (max-width: 768px) {
header h2{
                width: 8rem;
	}
	}

header h2 a{
                display: flex;
                width: 100%;
                height: 100%;
	overflow: hidden;
	text-indent: -100%;
	white-space: nowrap;
	background-position: top 58% center;
	background-repeat: no-repeat;
	background-image: url(/on/demandware.static/-/Sites-tmljp-storefront-catalog/default/staff%2Dstart%2Dimages/950215/gvlogo.svg);
	background-size: 60%;
	}
@media screen and (max-width: 768px) {
header h2 a{
	background-size: 60%;
	}
	}


/*================================

wrap

================================*/

.ss-wrap{
	width: 100%;
	height: auto;
	margin: auto;
                margin-top: 90px;
	position: relative;
                overflow-x: hidden;
	}
@media screen and (max-width: 768px) {
.ss-wrap{
                margin-top: 50px;
	}
	}


/*================================

Container

================================*/

.ss-Container{
	width: 100%;
                max-width: 100%;
	height: auto;
	margin: auto;
	position: relative;
	}


/*================================

intro

================================*/

.ss-intro{
	position: relative;
                width: 100%;
                display: flex;
                flex-direction: column;
	}

.ss-intro .ss-over{
	position: relative;
                width: 92%;
                display: flex;
                align-items: flex-start;
                margin-left: 8%;
                padding-top: 7rem;
                padding-bottom: 7rem;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-over{
                width: 90%;
                margin-left: 10%;
                padding-top: 4rem;
                padding-bottom: 4rem;
	}
	}

.ss-intro .ss-over h3{
                font-size: 2.7em;
                line-height: 1.5em;
                font-weight: 500;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-over h3{
                font-size: 2em;
                line-height: 1.5em;
	}
	}

.ss-intro .ss-under{
	position: relative;
                width: 88%;
                margin-left: 12%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under{
                width: 82%;
                margin-left: 18%;
                flex-direction: column;
	}
	}

.ss-intro .ss-under .ss-titles{
                flex: 1;
	}

.ss-intro .ss-under .ss-titles .ss-vol{
                font-size: 1.4em;
                line-height: 1em;
                font-weight: 300;
                padding-right: 1em;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under .ss-titles .ss-vol{
                font-size: 1.1rem;
	}
	}

.ss-intro .ss-under .ss-titles .ss-vol:before{
                content: '';
	position: absolute;
	left: -4.5%;
	top: .5em;
	width: 0%;
	border-bottom: 1px solid #000;
                transition: all 0.5s ease-out;
                opacity: 0;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under .ss-titles .ss-vol:before{
	left: -9%;
	top: .5em;
	width: 0%;
	}
	}

.ss-intro .ss-under .ss-titles .ss-vol.ss-viewline:before{
	width: 3%;
	opacity: 1;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under .ss-titles .ss-vol.ss-viewline:before{
	width: 5%;
	}
	}

.ss-intro .ss-under .ss-titles .ss-name{
                margin-top: 1rem;
                font-size: 1.5em;
                line-height: 1em;
                font-weight: 400;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under .ss-titles .ss-name{
                font-size: 1.1em;
	}
	}

.ss-intro .ss-under .ss-cledit{
                font-size: .9em;
                line-height: 2em;
                padding-right: 10rem;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-under .ss-cledit{
                padding-top: 3rem;
                font-size: .8em;
                line-height: 1.8em;
                padding-right: 0;
	}
	}

.ss-intro .ss-mainphoto{
	position: relative;
                width: 92%;
                margin-left: 8%;
                margin-top: 3rem;
	}
@media screen and (max-width: 768px) {
.ss-intro .ss-mainphoto{
                width: 95%;
                margin-left: 5%;
                margin-top: 3rem;
	}
	}

.ss-intro .ss-mainphoto img{
                width: 100%;
                height: auto;
	}


/*================================

lead

================================*/

.ss-lead{
	position: relative;
                width: 100%;
                margin: auto;
                padding-top: 7rem;
                padding-bottom: 7rem;
	}
@media screen and (max-width: 768px) {
.ss-lead{
                width: 80%;
                padding-top: 4rem;
                padding-bottom: 4rem;
	}
	}

.ss-lead:after{
                content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0%;
	border-bottom: 1px solid #ccc;
	opacity: 0;
                transition: all 0.5s ease-out;
	}
@media screen and (max-width: 768px) {
.ss-lead:after{
                content: '';
	position: absolute;
	left: 30%;
	bottom: 0;
	width: 40%;
	}
	}

.ss-viewline_lead:after{
	left: 40%;
	width: 20%;
	opacity: 1;
	}
@media screen and (max-width: 768px) {
.ss-viewline_lead:after{
	left: 30%;
	width: 40%;
	}
	}

.ss-lead p{
                text-align: center;
                font-size: 1em;
                line-height: 2.2em;
                font-weight: 300;
	}
@media screen and (max-width: 768px) {
.ss-lead p{
	text-align: justify;
	text-justify: inter-ideograph;
                line-height: 1.8em;
	}
	}

.ss-lead p.ss-more{
                margin-top: 2em;
	}


/*================================

body

================================*/

.ss-body{
	position: relative;
                width: 100%;
                margin: auto;
	}

.ss-body .ss-block{
	position: relative;
                width: 60%;
                min-width: 700px;
                max-width: 1000px;
                margin: auto;
                padding-top: 7rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block{
                width: 80%;
                min-width: 80%;
                max-width: 80%;
                padding-top: 4rem;
	}
	}

.ss-body .ss-block.ss-short{
                padding-top: 1rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block.ss-short{
                padding-top: 0;
	}
	}

.ss-body .ss-block h4{
	position: relative;
                font-size: 1.6em;
                line-height: 1.8em;
                font-weight: 300;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block h4{
                font-size: 1.3em;
                line-height: 1.8em;
                font-weight: 300;
                width: 90%;
                margin-left: 10%;
	}
	}

body .ss-block h4:before{
                content: '';
	position: absolute;
	left: -11%;
	top: .8em;
	width: 0%;
	border-bottom: 1px solid #000;
                transition: all 0.5s ease-out;
                opacity: 0;
	}
@media screen and (max-width: 768px) {
body .ss-block h4:before{
	left: -17%;
	top: .8em;
	width: 0%;
	}
	}

body .ss-block h4.ss-viewline:before{
	width: 8%;
	opacity: 1;
	}
@media screen and (max-width: 768px) {
body .ss-block h4.ss-viewline:before{
	width: 11%;
	}
	}

.ss-body .ss-block p{
	text-align: justify;
	text-justify: inter-ideograph;
                font-size: 1em;
                line-height: 2.2em;
                font-weight: 300;
                padding-top: 4rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block p{
                padding-top: 3rem;
                line-height: 1.8em;
	}
	}

.ss-body .ss-block p.ss-name{
                padding-top: 4rem;
                font-weight: 500;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block p.ss-name{
                padding-top: 3rem;
	}
	}

.ss-body .ss-block p.ss-answer{
                padding-top: 2rem;
                font-weight: 500;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block p.ss-answer{
                padding-top: 1.5rem;
	}
	}

.ss-body .ss-block span.ss-poem{
                display: block;
                padding-top: 1.5rem;
                font-weight: 600;
                width: 80%;
                margin: auto;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block span.ss-poem{
                width: 88%;
	}
	}

.ss-body .ss-block span.ss-inyo{
                display: block;
                padding-top: 1.5rem;
                width: 80%;
                margin: auto;
                font-size: .7em;
                text-indent: -.3em;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block span.ss-inyo{
                width: 88%;
	}
	}

                /*----
                photoの詳細は個別styleで
                ----*/



/*================================

note

================================*/

.ss-body .ss-note{
	position: relative;
                width: 80%;
                min-width: 900px;
                max-width: 1400px;
                margin: auto;
                margin-top: 8rem;
                padding: 5rem 0;
                background-color: #f7f7f7;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-note{
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                margin-top: 5rem;
                padding-top: 4rem;
	}
	}

.ss-body .ss-note::before{
                position: absolute;
                display: block;
                content: "";
                width: 44px;
                height: 44px;
                top: -22px;
                left: -22px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/on/demandware.static/-/Sites-tmljp-storefront-catalog/default/staff%2Dstart%2Dimages/950215/line.svg);
	background-size: contain;
                }
@media screen and (max-width: 768px) {
.ss-body .ss-note::before{
                top: -22px;
                left: 0;
                }
	}

.ss-body .ss-note::after{
                position: absolute;
                display: block;
                content: "";
                width: 44px;
                height: 44px;
                bottom: -22px;
                right: -22px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/on/demandware.static/-/Sites-tmljp-storefront-catalog/default/staff%2Dstart%2Dimages/950215/line.svg);
	background-size: contain;
                }
@media screen and (max-width: 768px) {
.ss-body .ss-note::after{
                bottom: -22px;
                right: 0;
                }
	}


.ss-body .ss-note h4{
	position: relative;
                font-size: 1em;
                line-height: 1em;
                font-weight: 500;
                width: 80%;
                margin: auto;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-note h4{
                width: 80%;
	}
	}

.ss-body .ss-note p{
	text-align: justify;
	text-justify: inter-ideograph;
                font-size: 1em;
                line-height: 2.2em;
                font-weight: 300;
                width: 80%;
                margin: auto;
                padding-top: 4rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-note p{
                padding-top: 3rem;
                line-height: 1.8em;
	}
	}



/*================================

website

================================*/

.ss-website{
	position: relative;
	width: 60%;
                min-width: 600px;
                max-width: 1000px;
	height: auto;
	margin: auto;
                margin-top: 8rem;
	padding: 8rem 0 0;
	text-align: center;
	}
@media screen and (max-width: 768px) {
.ss-website{
                margin-top: 6rem;
	padding: 6rem 0 0;
	width: 80%;
                min-width: 80%;
                max-width: 80%;
	}
	}

.ss-website:before{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	top: 0;
	border-top: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}
.ss-website:after{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	bottom: 0;
	border-bottom: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}

.ss-viewline_website_before:before{
	left: 20%;
	width: 60%;
                opacity: 1;
	}
.ss-viewline_website_after:after{
	left: 20%;
	width: 60%;
                opacity: 1;
	}

.ss-website p {
                font-size: .8em;
                line-height: 1.8em;
	text-align: center;
                }

.ss-website p a{
                font-weight: 400;
                text-decoration: underline;
                }



/*================================

information

================================*/

.ss-information{
	position: relative;
	width: 60%;
                min-width: 600px;
                max-width: 1000px;
	height: auto;
	margin: auto;
                margin-top: 8rem;
	padding: 8rem 0 0;
	text-align: center;
	}
@media screen and (max-width: 768px) {
.ss-information{
                margin-top: 6rem;
	padding: 6rem 0 0;
	width: 80%;
                min-width: 80%;
                max-width: 80%;
	}
	}

.ss-information:before{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	top: 0;
	border-top: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}
.ss-information:after{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	bottom: 0;
	border-bottom: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}

.ss-viewline_information_before:before{
	left: 20%;
	width: 60%;
                opacity: 1;
	}
.ss-viewline_information_after:after{
	left: 20%;
	width: 60%;
                opacity: 1;
	}

.ss-information p {
                font-size: 1em;
                line-height: 1.8em;
	text-align: center;
	/*text-align: justify;
	text-justify: inter-ideograph;*/
                }

.ss-information p a{
                font-weight: 400;
                text-decoration: underline;
                }

.ss-information p span.ss-infosub{
	font-weight: bold !important;
                font-family: sans-serif;
	}

.ss-information p span.ss-small{
                font-size: .8em;
	}

.ss-information p.ss-description{
                width: 80%;
                max-width: 600px;
                margin: auto;
                margin-top: 2rem;
                font-size: .85em;
	text-align: justify;
	text-justify: inter-ideograph;
	}
@media screen and (max-width: 768px) {
.ss-information p.ss-description{
                width: 100%;
	}
	}


/*================================

Item

================================*/

.ss-Item{
	position: relative;
	width: 45%;
                min-width: 600px;
                max-width: 900px;
	height: auto;
	margin: auto;
                margin-top: 8rem;
	padding: 5rem 0;
	text-align: center;
	}
@media screen and (max-width: 768px) {
.ss-Item{
                margin-top: 6rem;
	width: 90%;
                min-width: 90%;
                max-width: 90%;
	}
	}

.ss-Item:before{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	top: 0;
	border-top: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}
.ss-Item:after{
                content: '';
	position: absolute;
	left: 50%;
	width: 0%;
	bottom: 0;
	border-bottom: 1px solid #707070;
                transition: all 0.5s ease-out;
                opacity: 0;
	}

.ss-viewline_item_before:before{
	left: 20%;
	width: 60%;
                opacity: 1;
	}
.ss-viewline_item_after:after{
	left: 20%;
	width: 60%;
                opacity: 1;
	}

.ss-Item p.ss-ItemName{
                font-size: 1em;
                font-weight: 500;
	}

.ss-Item .ss-ItemEC{
                font-size: 1em;
	}

.ss-Item .ss-ItemEC a p{
                display: inline;
	position: relative;
	}

.ss-Item .ss-ItemEC a p:before{
                content: '';
	position: absolute;
	left: 0%;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid #000;
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	}
.ss-Item .ss-ItemEC a:hover p:before{
	width: 120%;
                transform: translateX(-10%);
	}


/*================================

footer

================================*/

footer{
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: 0;
	padding: 5rem 0;
	}

footer p.ss-footlogo{
	width: 130px;
	height: auto;
	margin: 5rem auto 0;
	}
@media screen and (max-width: 768px) {
footer p.ss-footlogo{
	width: 100px;
	margin: 3rem auto 0;
	}
	}

footer p.ss-footlogo img{
	width: 100%;
	height: auto;
	}

footer p.ss-copyright{
	margin: 3rem auto 0;
	font-size: .8em;
	}
@media screen and (max-width: 768px) {
footer p.ss-copyright{
	margin: 3em auto 0;
	-webkit-transform:scale(0.75);
	-moz-transform:scale(0.75);
	-ms-transform:scale(0.75);
	-o-transform:scale(0.75);
	transform:scale(0.75);
	}
	}


/*================================

youtube

================================*/

.ss-youtube {
                position: relative;
                width: 100%;
                padding-top: 56.25%;
                }

.ss-youtube iframe {
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                }


/*================================

contents

================================*/

.ss-intro .ss-under .ss-titles .ss-name {
                margin-top: 2em;
                padding-right: 1em;
                font-size: 1em;
                font-weight: 300;
                line-height: 1.5em;
                }
@media screen and (max-width: 768px){
.ss-intro .ss-under .ss-titles .ss-name {
                font-size: 1em;
                line-height: 1.5em;
                }
                }

.ss-intro .ss-under .ss-titles .ss-name2 {
                margin-top: .5em;
                font-size: 1.5em;
                line-height: 1.5em;
                }
@media screen and (max-width: 768px){
.ss-intro .ss-under .ss-titles .ss-name2 {
                font-size: 1.3em;
                line-height: 1.5em;
                }
                }

.ss-body .ss-photoblock{
	position: relative;
                padding-top: 8rem;
                padding-bottom: 3rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock{
                padding-top: 6rem;
                padding-bottom: 3rem;
	}
	}


.ss-body .ss-photoblock.ss-block1{
                width: 100%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
	}

.ss-body .ss-photoblock.ss-block1 .ss-photo{
	position: relative;
                display: flex;
	}

.ss-body .ss-photoblock.ss-block1 .ss-photo.ss-photo1{
                flex-direction: column;
                width: 30%;
                height: auto;
                margin-left: -15%;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block1 .ss-photo.ss-photo1{
                width: 65%;
                margin-left: 0;
	}
	}

.ss-body .ss-photoblock.ss-block1 .ss-photo.ss-photo1 img{
                display: block;
                width: 100%;
                height: auto;
	}

.ss-body .ss-photoblock.ss-block1 .ss-photo.ss-photo1 p{
                margin-top: 1.5em;
                line-height: 1.5em;
                font-size: .8rem;
                text-align: center;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block1 .ss-photo.ss-photo1 p{
	}
	}



.ss-body .ss-photoblock.ss-block2{
                width: 100%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
	}

.ss-body .ss-photoblock.ss-block2 .ss-photo{
	position: relative;
                display: flex;
	}

.ss-body .ss-photoblock.ss-block2 .ss-photo.ss-photo2{
                flex-direction: column;
                width: 35%;
                height: auto;
                margin-left: 0;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block2 .ss-photo.ss-photo2{
                width: 55%;
                margin-left: 0;
	}
	}

.ss-body .ss-photoblock.ss-block2 .ss-photo.ss-photo2 img{
                display: block;
                width: 100%;
                height: auto;
	}




.ss-body .ss-photoblock.ss-block3{
                width: 100%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
	}

.ss-body .ss-photoblock.ss-block3 .ss-photo{
	position: relative;
                display: flex;
	}

.ss-body .ss-photoblock.ss-block3 .ss-photo.ss-photo3{
                flex-direction: column;
                width: 42%;
                height: auto;
                margin-left: 15%;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block3 .ss-photo.ss-photo3{
                width: 70%;
                margin-left: 10%;
	}
	}

.ss-body .ss-photoblock.ss-block3 .ss-photo.ss-photo3 img{
                display: block;
                width: 100%;
                height: auto;
	}






.ss-body .ss-photoblock.ss-block4{
                width: 100%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-bottom: 0;
	}

.ss-body .ss-photoblock.ss-block4 .ss-photo{
	position: relative;
                display: flex;
	}

.ss-body .ss-photoblock.ss-block4 .ss-photo.ss-photo4{
                flex-direction: column;
                width: 30%;
                height: auto;
                margin-left: -15%;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block4 .ss-photo.ss-photo4{
                width: 65%;
                margin-left: 0;
	}
	}

.ss-body .ss-photoblock.ss-block4 .ss-photo.ss-photo4 img{
                display: block;
                width: 100%;
                height: auto;
	}





.ss-body .ss-photoblock.ss-block5{
                width: 100%;
                margin: auto;
                display: flex;
                align-items: center;
                justify-content: center;
	}

.ss-body .ss-photoblock.ss-block5 .ss-photo{
	position: relative;
                display: flex;
	}

.ss-body .ss-photoblock.ss-block5 .ss-photo.ss-photo5{
                align-items: center;
                width: 80%;
                max-width: 1200px;
                height: auto;
                margin-left: 0;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-photoblock.ss-block5 .ss-photo.ss-photo5{
                width: 100%;
                max-width: 100%;
                margin-left: 0;
	}
	}

.ss-body .ss-photoblock.ss-block5 .ss-photo.ss-photo5 img{
                display: block;
                width: 100%;
                height: auto;
	}




.ss-body .ss-block ul.ss-sentence{
                margin: 4rem auto 0;
                padding: 2rem 2rem 2rem 3.5rem;
                border: 1px solid #dedede;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block ul.ss-sentence{
                margin: 2rem auto 0;
                padding: 1rem 1rem 1rem 2.5rem;
                border: 1px solid #dedede;
	}
	}

.ss-body .ss-block li.ss-decimal{
	text-align: justify;
	text-justify: inter-ideograph;
                font-size: 1em;
                line-height: 2.2em;
                font-weight: 400;
                padding: 1rem 0;
                list-style-type: decimal;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block li.ss-decimal{
                line-height: 1.6em;
	}
	}

.ss-body .ss-block li.ss-decimal:last-child{
                border-bottom: none;
	}

.ss-body .ss-block li.ss-detail {
	text-align: justify;
	text-justify: inter-ideograph;
                font-size: 1em;
                line-height: 2.2em;
                font-weight: 300;
                padding-top: 1rem;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block li.ss-detail {
                line-height: 1.6em;
	}
	}


/*================================

Item

================================*/

.ss-Item .ss-ItemPhoto{
	width: 100%;
	height: auto;
                margin: auto;
	padding: 5rem 0;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: nowrap;
	}
@media screen and (max-width: 768px) {
.ss-Item .ss-ItemPhoto{
	width: 100%;
	padding: 4rem 0;
                flex-wrap: wrap;
	}
	}

.ss-Item .ss-ItemPhoto a{
                display: block;
	width: 100%;
	height: auto;
	}
.ss-Item .ss-ItemPhoto img{
                display: block;
	width: 100%;
	height: auto;
	}
@media screen and (max-width: 768px) {
.ss-Item .ss-ItemPhoto a{
                display: block;
	width: 33.33%;
	height: auto;
	}
.ss-Item .ss-ItemPhoto img{
	width: 100%;
	}
	}


/*================================

archives

================================*/


#ss-archives{
	position: fixed;
	bottom: -1px;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 1px;
	overflow: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling : touch;
	background-color: #fff;
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-o-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	}

#ss-archives .ss-closegallery{
	display: none;
	position: fixed;
	top: 10px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/on/demandware.static/-/Sites-tmljp-storefront-catalog/default/staff%2Dstart%2Dimages/950215/x.svg);
	background-size: 50%;
	cursor: pointer;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-closegallery{
	top: 0;
	right: 0;
	}
	}

#ss-archives .ss-gallerylist{
	width: 80%;
	height: auto;
	margin: 5rem auto 5rem;
	display: none;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist{
	margin: 50px auto 0;
	width: 90% !important;
	}
	}

#ss-archives .ss-gallerylist h3{
                font-size: 1.1em;
                font-weight: 500;
	}

#ss-archives .ss-gallerylist ul {
                display: flex;
                align-items: top;
                justify-content: space-between;
                flex-wrap: wrap;
	margin: 0;
	padding: 0;
                margin-top: 2rem;
	width: 100%;
	height: auto;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul {
                margin-top: 1rem;
	}
	}

#ss-archives .ss-gallerylist ul li{
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
	margin: 0;
	padding: 2rem 0;
	width: 100%;
	height: auto;
                border-bottom :1px solid #ccc;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul li{
	padding-bottom: 30px;
	width: 100%;
	}
	}

#ss-archives .ss-gallerylist ul li:last-child{
                border-bottom :none;
	}

#ss-archives .ss-gallerylist ul li a{
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	}

#ss-archives .ss-gallerylist ul li a .ss-thm{
	width: 30%;
	height: auto;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul li a .ss-thm{
	width: 30%;
	}
	}

#ss-archives .ss-gallerylist ul li a .ss-thm img{
	width: 100%;
	height: auto;
	}

#ss-archives .ss-gallerylist ul li a:hover .ss-thm img{
	opacity: 1;
	filter: alpha(opacity=100);
	}

#ss-archives .ss-gallerylist ul li a .ss-texts{
	width: 66%;
	height: auto;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul li a .ss-texts{
	width: 65%;
	}
	}

#ss-archives .ss-gallerylist ul li a .ss-texts p{
                font-weight: 500;
	font-size: 1em;
	line-height: 1.8em;
                display: inline-block;
	}

#ss-archives .ss-gallerylist ul li a .ss-texts p.ss-ttls{
                margin-top: 1rem;
                margin-bottom: .5rem;
                line-height: 1.1em;
	font-size: 1.2em;
                border-bottom: 1px solid transparent;
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul li a .ss-texts p.ss-ttls{
	font-size: 1em;
	}
	}

#ss-archives .ss-gallerylist ul li a:hover .ss-texts p.ss-ttls{
                border-bottom: 1px solid #222;
	}

#ss-archives .ss-gallerylist ul li a .ss-texts p.ss-vols,
#ss-archives .ss-gallerylist ul li .ss-texts p.ss-names{
                font-weight: 300;
	}
@media screen and (max-width: 768px) {
#ss-archives .ss-gallerylist ul li a .ss-texts p.ss-vols,
#ss-archives .ss-gallerylist ul li .ss-texts p.ss-names{
	font-size: .9em;
	}
	}

.ss-fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	}


/*================================

youtube

================================*/

.ss-youtube {
                margin-top: 5rem;
                }
@media screen and (max-width: 768px) {
.ss-youtube {
                margin-top: 3rem;
                }
	}

.ss-body .ss-block .ss-youtubebox{
                width: 100%;
                margin: auto;
	}
@media screen and (max-width: 768px) {
.ss-body .ss-block .ss-youtubebox{
                width: 100%;
	}
	}

.ss-body .ss-block .ss-youtubebox p{
                padding-top: 0;
                margin-top: 1.5em;
                line-height: 1.5em;
                font-size: .8rem;
                text-align: center;
	}