@charset "UTF-8";
/* CSS Document */
/**************************************************
 @ RESET verHTML5
 - ALL
**************************************************/
html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
ul { list-style: none outside none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: none;}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    color: #ffffff;
    text-decoration: none;
    vertical-align: baseline;
    background: transparent;
    }
a:link,a:visited,a:active {
    color: #ffffff;
    text-decoration: none;
    }
a:hover {
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    opacity: .65
    }
a:visited { color: #ffffff;}

table {
    border-collapse: collapse;
    border-spacing: 0;
    }
input,select { vertical-align: middle;}
img { vertical-align: bottom;}

/**************************************************
 @ BASE - ALL
**************************************************/
body {
    background-color: #343434;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue,"游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, Meiryo, sans-serif;
    font-size: 0.825rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 2;
    letter-spacing: 0.05rem;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    }
span, object, article,
aside, dialog, figure, footer,
header, menu, nav, section {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    }
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    }
img {
    width: 100%;
    height: auto;
    }

#wrap {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    }

#wrap::before {
    position: absolute;
    top: 2.5%;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    height: 1px;
    width: 96.5%;
    background-color: #ffffff;
    }
#wrap::after {
    position: absolute;
    bottom: 2.5%;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    height: 1px;
    width: 96.5%;
    background-color: #ffffff;
    }

.section_inner {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    }

.section_inner::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.75%;
    margin: auto;
    content: "";
    height: 95%;
    width: 1px;
    background-color: #ffffff;
    }
.section_inner::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.75%;
    margin: auto;
    content: "";
    height: 95%;
    width: 1px;
    background-color: #ffffff;
    }


/*---------------------------
	----------------- USER AGENT */
@media (min-width: 768px) {
	
	.sp { display: none !important }
	
}
@media (max-width: 767px) and (min-width: 320px) {
	
	body {
        font-size: 0.8rem;
        letter-spacing: 0;
        width: 100%;
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        height: -webkit-fill-available;
		}
	
	#wrap {
		width: 100%;
		max-width: 767px;
		min-width: 320px;
		margin: 0 auto
		}
	
	.pc { display: none !important; }

}


#content {
    position: relative;
    text-align: center;
    }
#content h1.logo {
    max-width: 240px;
    margin: 0 auto 20px;
    }
#content p:nth-child(1) {
    font-size: 2vw;
    line-height: 1;
    letter-spacing: 0.125rem;
    color: #ffffff;
    padding-top: 16.5%;
    margin-bottom: 10px;
    }
#content p:nth-child(2) {
    font-size: 0.95vw;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 35px;
    }
#content p:nth-child(4) { font-weight: 600;}
#content p:nth-child(5) { font-weight: 600; margin-bottom: 25px;}

.btn { 
    max-width: 300px;
    margin: auto;
    }
.btn a {
    position: relative;
    display: block;
    padding: 22px 0;
    background-color: #ffffff;
    width: 100%;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    line-height: 1;
    color: #343434;
    text-align: center;
    text-decoration: none;
    outline: 0;
    transition: all .2s;
    }
.btn a::after,
.btn a::before {
    position: absolute;
    z-index: 2;
    content: '';
    width: 0;
    height: 0;
    border: 1px solid transparent;
     }
 .btn a::before {
     top: 0;
     left: 0;
     }
 .btn a::after {
     bottom: 0;
     right: 0;
     }
 .btn a:hover {
     opacity: 1;
     background-color: transparent;
     font-weight: 600;
     color: #ffffff;
     letter-spacing: 0.15em;
     }
 .btn a:hover::after,
 .btn a:hover::before {
     width: 100%;
     height: 100%;
     }
 .btn a:hover::before {
     border-bottom-color: #ffffff;
     border-left-color: #ffffff;
     transition: height .3s,width .3s .3s;
     }
 .btn a:hover::after {
     border-top-color: #ffffff;
     border-right-color: #ffffff;
     transition: height .3s,width .3s .3s;
    }

@media (max-width: 767px) and (min-width: 320px) {
    
    #content h1.logo {
        max-width: 220px;
        margin: 0 auto 25px;
        }
    
    #content p:nth-child(1) {
        font-size: 7vw;
        line-height: 1;
        letter-spacing: 0.08rem;
        color: #ffffff;
        padding-top: 35%;
        margin-bottom: 10px;
        }
    #content p:nth-child(2) {
        font-size: 3.5vw;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.05rem;
        color: #ffffff;
        margin-bottom: 35px;
        }
    
    #content p:nth-child(4) { font-size: 3.5vw; font-weight: 600; line-height: 1.6; margin-bottom: 5px;}
    #content p:nth-child(5) { font-size: 4vw; font-weight: 600; margin-bottom: 35px;}
}
/*************************************************
 @CONTENTS - 1.HEADER
----------------------------------------------- */
@media (max-width: 767px) and (min-width: 320px) {
    
}
/*************************************************
 @CONTENTS - 2.KEYVISUAL
----------------------------------------------- */
@media (max-width: 767px) and (min-width: 320px) {
    
}
/*************************************************
 @CONTENTS - 4.COMMON
----------------------------------------------- */
@media (max-width: 767px) and (min-width: 320px) {
    
}