/*====================================================================================*/
/* Common
/*====================================================================================*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
@property --mask-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --mask-end {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --PTSmask-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
@property --PTSmask-end {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}


:root {
}
html{
	font-size: 62.5%;
}
.pcDisp{
	
}
.mobDisp{
	display: none !important;
}
.mobDispInline{
	display: none !important;
}
.HiddenOpacity{
	opacity:0;
	
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
body{
	margin:0;            /* 余白消去 */
    --key-color: #9facb7;
    background-color: white;

	/* フォント */
    font-family: YuMincho, 'Yu Mincho', serif;
    font-weight: 100;
    font-size: 10.5pt;
    line-height: 2.0em;
    letter-spacing: 0.1em;
    margin: 0;
    text-rendering: optimizeLegibility;
    
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-text-size-adjust:none;
	text-size-adjust:none;
}
body.pageTransition{
	opacity:0;
	transform:translateY(-50px);
	filter: blur(30px);
	
	/* animation */	
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
p{
	margin:0;
}
/* Layout関連 */
.Clean{
	opacity:0;
}
.AppearClean{
	opacity:1;
}

.hide{
	display:none !important;
}
.LayoutLeft{
	display:inline-block;
	text-align:left;
}
.LayoutRight{
	display:inline-block;
	text-align:right;
}
.LayoutClear{
    clear:both;
}
.divLink{
	display:inline-block;
	padding:5px 10px;
    background-color: white;
    color: black;
	border: solid 1px;
		/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.divLink:hover{
	background:black;
	color:white;
	
}
.text{
	display:inline-block;
}
.arrowLink{
	display:inline-block;
}
.arrowLink > .arrownSymbol{
	display:inline-block;
}
.arrowLink > .arrownSymbol > .slashLine{
	width:5px;
	height:1px;
	display:inline-block;
	content:" ";
	background:black;
    transform: translate(-5px, -2px) rotate(45deg);
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
	
}
.arrowLink > .arrownSymbol > .wideLine{
	width:20px;
	height:1px;
	display:inline-block;
	content:" ";
	background:black;
	
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
.hoverLink .wideLine{
	width:30px !important;
	background:white !important;
}
.hoverLink .slashLine{
	background:white !important;
}

/* Animation関連 */
.Delay250ms{
animation-delay: 250ms;
}
.Delay500ms{
animation-delay: 500ms;
}
.Delay750ms{
animation-delay: 750ms;
}
.Delay1000ms{
animation-delay: 1000ms;
}
.Delay1500ms{
animation-delay: 1000ms;
}

.FadeIn{
	opacity:0.0;

	/* animation */	
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.fontLGray{
    color: lightgray !important;
}
.FadeInGray{
	/* animation */	
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.ForceGray{
	background: rgb(187, 187, 187) !important;
    color: white !important;
}


/* グラデーション mask */

/* for fadeIn*/
.fadeInSizeUp{
	opacity:0;
	transform: scale(0.8);
	
	/* animation */	
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.FadeInUp{
	opacity:0.0;

	/* animation */	
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;

	/* Layout*/
	-moz-transform   : translateY(30px);
	-webkit-transform: translateY(30px);
	-o-transform     : translateY(30px);
	-ms-transform    : translateY(30px);
	transform        : translateY(30px);


}
.FadeInLeft{
	opacity:0.0;

	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

	/* Layout*/
	-moz-transform   : translateX(50px);
	-webkit-transform: translateX(50px);
	-o-transform     : translateX(50px);
	-ms-transform    : translateX(50px);
	transform        : translateX(50px);
	

}
.FadeInRight{
	opacity:0.0;

	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

	/* Layout*/
	-moz-transform   : translateX(-50px);
	-webkit-transform: translateX(-50px);
	-o-transform     : translateX(-50px);
	-ms-transform    : translateX(-50px);
	transform        : translateX(-50px);
}
.FadeInSlideMaskText{
	
	/* Layout */
	width:0%;
	overflow-x:hidden;
	
	/* animation */	
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
.SlideMaskText{	
	/* Layout */
	width:0%;
	overflow-x:hidden;
	
	/* animation */	
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
.animation{
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}
.delay250ms{
	transition-delay: 250ms;
}
.delay500ms{
	transition-delay: 500ms;
}
.delay500ms{
	transition-delay: 750ms;
}
.delay1000ms{
	transition-delay: 1000ms;
}

.ReadMoreVisible {
      opacity: 1;
      animation-duration: 2s;
      animation-name: fade-in;
      -moz-animation-duration: 2s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 2s;
      -webkit-animation-name: fade-in;
}

/* ExtentionButton */
.extensionWrapper{
	cursor:pointer;
	display:none;
}
.extension{
	display:inline-block;
}

/* text underline effect */
a{
	outline: none !important;
	text-decoration: none !important;
}

/* OverLine Effect */
.OverlineEffect{
	position:relative;
}
.OverlineEffect::after {
	color:black;
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.OverlineEffect:hover::after {
	color:black;
  transform: scale(1, 1);
}


/* for pageTrandition */
.pageTransitionSlideMaskVertical{
	overflow:hidden;
}
.pageTransitionSlideMaskVertical *{
	/* animation */	
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.pageTransitionSlideMaskVertical.isActive {
	
}	
.pageTransitionSlideMaskVertical.isActive  *{
	transform:translateY(-100%);
}
.pageTransitionSlideMaskVertical p{
	margin:0;
}


.FontBlack{
	color:black !important;
}
.FontWhite{
	color:white !important;
}

/* form */

button {
    font-family: YuMincho, 'Yu Mincho', serif;
    font-size: 80%;
    letter-spacing: 0.3rem;
    /* padding: 8px; */
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 14px;
    padding-right: 14px;
    /* width: 150px; */
    border-style: solid;
    border-width: 0.5px;
    background-color: black;
    border: solid 1px #dddddd;
    color: white;
    text-align: center;
    transition: background-color 0.75s ease;
    transition: color 0.75s ease;
    letter-spacing: 0.2em;
    cursor: pointer;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
button:hover{
	background-color: white;
    color: black;
}
button:disabled{
	background-color: #dddddd;
    border: solid 1px #dddddd;
    color: white;
    
    /* ★超重要：これでCSSだけでクリックイベントを完全に無効化します */
    pointer-events: none; 
    
    /* カーソルを「禁止マーク」にして、押せないことをユーザーに伝えます */
    cursor: not-allowed;
}
select {
    all: unset;
    padding: 10px 40px 10px 15px;
    border: solid 1px #aaaaaa;
}
.selectWrapper > .mark {
    display: inline-block;
    transform: translateX(-28px);
    font-size: 80%;
    pointer-events: none;
}
input[type="number"]{
    all: unset;
    border: solid 1px #cccccc;
    width: 50px;
    font-size: 80%;
    padding-left: 10px;
}
/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
body{

}
/* OverLine Effect */
.OverlineEffect{
	position:relative;
}
.OverlineEffect::after {
	display:none;
}
.OverlineEffect:hover::after {
color:black;
  transform: scale(1, 1);
}
.pcDisp{
	display: none !important;
}
.mobDisp{
	display:block !important;
}
.mobDispInline{
	display:inline-block !important;
}	
/* Font */


}
/*====================================================================================*/
/* スマフォ横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){
body{

}

/* Font */


}