@charset "UTF-8";
/*-------------------------------------------------------------------------
RESET CSS
-------------------------------------------------------------------------*/
html {
  background: none;
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  vertical-align: baseline;
  width: 100%; }

body, div, a, span, object, iframe, 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, main, menu, nav, section, summary, time, mark, audio, video, textarea, input {
  background: none;
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  vertical-align: baseline;
  font-size: 14px;
  font-weight: 500;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #222;
  letter-spacing: .05em;
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
}

a,span,li,strong{
	font-family:inherit;
	font-weight:inherit;
	font-size: inherit;
	line-height: inherit;
	color:inherit;
	
}
a{
	text-decoration: none;
	outline: none;
}
a:hover{
  color: #72A4D9;
  cursor: pointer;
  transition: .3s ease;
}
li {
    list-style-type: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

img {
    vertical-align: top;
    max-width: 100%;
}

iframe {
  vertical-align: top;
  max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

p{
	line-height: 2;
	text-align: justify;
	word-break: break-all;
}

.contents-wrapper{
	width: 100%;
	overflow: hidden;
}

/* br */
.br_mb{
	display: none;
}
@media screen and (max-width: 640px) {
	.br_mb{
	    display: inline;
	}
	.br_mb_none{
	    display: none;
	}
}

/* font */
.ttl_font{
	font-family: 'Tilt Warp', cursive;
}

/* clearfix */
.clearfix:after {
    display: block;
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
.clearfix {
  display: block;
}
/*-------------------------------------------------------------------------
BODY
-------------------------------------------------------------------------*/
body:before{
	content: "";
	display: block;
	width: 1218px;
    height: 734px;
    background: url(../images/img_digital.png) no-repeat;
	background-size: contain;
	position: fixed;
	top: 70px;
	right: calc(50% - 390px);
	z-index: -100;
}

/*-------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------*/
header{
	text-align: center;
	padding: 0 30px;
}
header.fixed{
	position: sticky;
    top: 0;
    background: rgb(255 255 255 / 70%);
    opacity: .8;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    z-index: 100;
}
.header-contents{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	height: 80px;
	margin: 0 auto;
}
.header-logo{
	width: 360px;
}
.nav_item_wrapper{
	display: flex;
	gap: 32px;
}
.nav-item{
	font-family: 'Tilt Warp', cursive;
	font-size: 24px;
}
@media screen and (max-width: 640px) {
	.header-contents{
	    flex-direction: column;
	    height: auto;
	    padding: 12px 0;
	}
	.header-logo{
	    text-align: center;
	    margin: 0 0 12px;
	}
	.header-logo img{
	    width: calc(100% / 3);
	}
	.nav_item_wrapper{
	    gap: 18px;
	}
	.nav-item{
	    font-size: 5vw;
	    letter-spacing: .02em;
	}
}

/*-------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------*/
footer{
	background: #044570;
}
.footer_section{
	display: flex;
	justify-content: center;
	gap: 88px;
	padding: 40px 30px 64px;
}
.footer_section_title{
	font-family: 'Tilt Warp', cursive;
	font-size: 24px;
	color: #fff;
}
.footer_item{
	display: inline-block;
	color: #fff;
	padding: 8px 0;
}
@media screen and (max-width: 640px) {
	.footer_section{
	    flex-direction: column;
	    gap: 40px;
	    text-align: center;
	}
	.footer_item{
	    white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
	}
}