@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
}

html {
	font-size: 16px;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
body領域ここから
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.outerWrapper {
	width: min(95%, 1200px);
	height: auto;
	margin: 0 auto;
	position: relative;
}

h1 {
	display: inline-box;
	font-family: "Impact", sans-serif;
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
	color: #777;
}

h2 {
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	color: #777;
}

caption {
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	font-weight: bold;
	color: #777;
}

p {
	font-family: "Noto Sans JP", "Impact", Arial, Helvetica, sans-serif,;
	font-size: clamp(0.8rem, 1.333vw, 1rem);
	color: #777;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ヘッダー領域
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

.headerContainer {
	width: min(100%, 1200px);
	height: 70px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer {
	width: min(50%, 600px);
	height: 70px;
	background-color: dimgray;
	/* border: solid 1px gray; */
}

.logoNameContainer a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(40px, 4.166vw, 50px);
	height: clamp(40px, 4.166vw, 50px);
	border-radius: 50%;
	font-family: "Impact",Arial, Helvetica, sans-serif, "Noto Sans JP";
	font-size: clamp(1.125rem, 0.974rem + 0.701vw, 1.5rem);
	background-color:red;
	color: #fff;
	margin: 0 10px;
}

.logo:hover {
	box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	background-color: #fff;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.4);
}

.companyName h1 {
	width: min(100%, 300px);
	line-height: 70px;
	color: #fff;
	font-family: "Impact",Arial, Helvetica, sans-serif;
	font-size: clamp(2rem, 1.799rem + 0.935vw, 2.5rem);
	letter-spacing: 0.1rem;	
}

.companyName h1:hover {
	/* box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 background-color: #fff;
	 color: red; */
	 color: red;
	 text-shadow: 6px 6px 6px rgba(255, 255, 255, 0.5);
	 border-radius:25%;
}

/* .companyName h1 span {
	color: red;
} */

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊
ナビゲーション領域＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（PC）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/
@media (min-width: 769px) {
	.globalNav {
		width: min(50%, 600px);
		height: 70px;
		position: relative;
		display: flex;
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
	}

	.globalNav ul {
		width: 100%;
		height: 70px;
		display: flex;
		justify-content: end;
		align-items: center;
		background-color: dimgray;
	}

	.globalNav ul li {
		display: inline-block;
		width: 30%;
		height: 40px;
		margin-right: 1.67%;
	}

	.globalNav ul li a {
		background-color: darkgray;
		display: inline-block;
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-family: "Impact", Arial, Helvetica, sans-serif;
		font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
		letter-spacing: 0.03rem;
		color: #fff;
		border: solid 1px gray;
	}

	.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border: transparent;
	 }
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここから↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

.nav-btn {
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	cursor: pointer;
	color: #aaa;
	font-size: 25px;
	position: absolute;
	right: 30px;
	line-height: 70px;
}

.open .nav-btn {
	z-index: 110;
}

.nav-btn .fa-bars {
	display: revert;
}

.open .nav-btn .fa-bars {
	display: none;
}

.nav-btn .batu {
	display: none;
}

.open .nav-btn .batu {
	display: revert;
}

.globalNav ul li a:hover {
	 box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 color: red;
	 text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
	 border-radius: 10%;
  }

@media (min-width: 769px) {
	.nav-btn {
		display: none;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーション/ハンバーガーボタンここまで↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	ナビゲーションメニュー（スマートフォン）
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　*/

@media (max-width: 768px) {
	.globalNav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: dimgray;
		color: #fff;
		transition: transform 0.3s;
	}

	.open .globalNav {
		transform: translate(-100%, 0);
	}

	.globalNav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
	}

	.globalNav ul li a {
		color: #fff;
	}
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊
ナビゲーション領域ここまで
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
メイン領域ここから
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.heroContainer {
	width: min(100%, 1200px);
	height: auto;
	margin: 0 auto;
	/* background-color: #f5f5f5; */
	/* border: solid 1px gray; */
	position: relative;
}

/* .textContainer {
	display: block;
	max-width: 1200px;
	max-width: 300px;
	margin-inline: auto;
} */

.txt {
	max-width: 1200px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: end;
	overflow: hidden;
}

.txt p {
	display: inline;
	font-family: "Impact",Arial, Helvetica, sans-serif,"Noto Sans Japanese";
	font-size: clamp(3.125rem, 1.869rem + 5.841vw, 6.25rem);
	color: red ;			
	letter-spacing: .06em;
	text-align: center;       
	/*アニメーション領域 
	フェードインスタート　↓*/		
	opacity: 0;
	animation: textanimation 8s infinite;
}

.txt p:nth-child(1) {
    animation-delay: 0.3s
}

.txt p:nth-child(2) {
    animation-delay: 0.6s
}

.txt p:nth-child(3) {
    animation-delay: 0.9s
}

.txt p:nth-child(4) {
    animation-delay: 1.2s
}

.txt p:nth-child(5) {
    animation-delay: 1.5s
}

.txt p:nth-child(6) {
    animation-delay: 1.8s
}

.txt p:nth-child(7) {
    animation-delay: 2.1s
}

.txt p:nth-child(8) {
    animation-delay: 2.4s
}

.txt p:nth-child(9) {
    animation-delay: 2.7s
}

.txt p:nth-child(10) {
    animation-delay: 3.0s
}
/*フェードアウトスタート↓ */

.txt p:nth-child(1) {
    animation-delay: 3.3s
}

.txt p:nth-child(2) {
    animation-delay: 3.6s
}

.txt p:nth-child(3) {
    animation-delay: 3.9s
}

.txt p:nth-child(4) {
    animation-delay: 4.2s
}

.txt p:nth-child(5) {
    animation-delay: 4.5s
}

.txt p:nth-child(6) {
    animation-delay: 4.8s
}

.txt p:nth-child(7) {
    animation-delay: 5.1s
}

.txt p:nth-child(8) {
    animation-delay: 5.4s
}

.txt p:nth-child(9) {
    animation-delay: 5.7s
}

.txt p:nth-child(10) {
    animation-delay: 6.0s
}

@keyframes textanimation {
    0% {
        opacity: 0;
         filter: blur(6px);
    }

    25% {
        opacity: 1;
         filter: blur(0px);
    }

    50% {
         transform: translateY(0px);
         opacity: 1;
         filter: blur(0px);
   	}
  
	 100% {
         transform: translateY(-100%);
         opacity: 0;
         filter: blur(24px);
	 	}
}

.svgbox {
      fill:red;
      fill-opacity:0;
      stroke:red;
      stroke-width: 0.2px;
      font-family: "Impact", Arial, Helvetica, sans-serif; 
      stroke-dashoffset: 10px;
      stroke-dasharray: 3px 1px;
      animation: move 6s ease infinite normal forwards;
    }
    @keyframes move {
      0% {
        stroke-dashoffset: 0;
        stroke-opacity: 0; 
        stroke-width: 0.1px;
        stroke-dasharray: 0px 20px;
        }

        50%{
        stroke-dashoffset: 20;
        stroke-opacity: 1; 
        stroke-width: 0.5px;
        stroke-dasharray: 15px 0px;
        fill-opacity: 0;
      }      

        100%{
        stroke-dashoffset: 20;
        stroke-opacity: 1; 
        stroke-width: 0.5px;
        stroke-dasharray: 15px 0px;
        fill-opacity: 1;
      }
    }

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター領域レスポンシブ共通　ここから　↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

.footerContainer {
	display: block;
	margin: 0 auto;
	width: min(100%, 1200px);
	/* height: 300px; */
	height: auto;
	background-color: dimgray;
	border: solid 1px #fff;
	padding-bottom: 50px;
}

.navTermsOuter {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッターナビゲーション　ここから　↓ */
.footerNav {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-between;
	flex-direction: flex-start;
	align-items: center;
}

.footerNav ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-start;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.footerNav ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:last-child {
	margin-right: none;
} */

.footerNav ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-family: "Impact", Arial, Helvetica, sans-serif;
	font-size: clamp(1rem, 0.950rem + 0.234vw, 1.125rem);
	letter-spacing: 0.03rem;
	color: white;
	border: solid 1px gray;
}

.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* ブレークポイント600以下でfooterNavの最初のliのabout usが中央寄せにならない原因となった記述。 */
/* .footerNav ul li:first-child {
	margin-left: 10px;
} */

/* ＊＊＊フッターナビゲーション　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
フッター部各種条項・コピーライト　ここから↓ */

.termsConditions {
	width: min(100%, 600px);
	height: 70px;
	display: block;
}

/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
各種条項　ここから　↓　 */
.termsConditions ul {
	width: min(100%, 600px);
	height: 70px;
	display: flex;
	justify-content: flex-end;
	justify-content: space-around;
	align-items: center;
	background-color: dimgray;
}

.termsConditions ul li {
	display: inline-block;
	width: 30%;
	height: 40px;
	margin-right: 1.67%;
}

.termsConditions ul li a {
	background-color: darkgray;
	display: inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: clamp(14px, 1.33vw, 16px);	
	color: #fff;
	border: solid 1px gray;
}

.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

/* 各種条項　ここまで　↑
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* ＊＊＊問い合わせ先＊＊＊ */

.footerContactCopy {
	width: 100%;
	height: auto;
	text-align: center;
	display: block;
	margin-top: 20px;
	font-family: "Noto sans JP", sans-serif;
	color: #fff;
}

.address,
.contact {
	margin: 0 auto;
	text-align: center;
}

.address p,
.contact p {
	font-size: clamp(14px, 1.33vw, 16px);
	color: #fff;
}

/* ＊＊＊コピーライト＊＊＊ */

.copyRight {
	display: block;
	text-align: center;
	font-size: clamp(14px, 1.33vw, 16px);
}

/* ****************************************
タブレットサイズ ブレークポイント 975px以下
******************************************/
/*＊＊＊フッターナビゲーションと各種条項を縦並び中央寄せ＊＊＊ */

@media(max-width: 975px) {

	.navTermsOuter {
		width: min(100%, 600px);
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		justify-content: flex-start;
	}

	.navTermsOuter ul {
		justify-content: center;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	/* .footerNav ul li:first-child {
		margin-left: 0;
	} */

	.footerContractCopy p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}
}
/* ****************************************
スマホサイズ ブレークポイント 600px以下
******************************************/

@media(max-width: 600px) {

	/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
		 ヘッダー領域 社名に幅を与えて中央寄せに配置を変更する */

	.logoNameContainer {
		width: min(100%, 300px);
		margin: 0 auto;
	}

	/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
	フッター領域 
	フッターナブ、各条項、コピーライトを縦並び1列表示にする*/

	.navTermsOuter {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-top: 10px;
	}

	.footerContainer {
		width: min(100%, 600px);
		height: auto;
		display: block;
	}

	.footerNav {
		width: min(100%, 600px);
		height: auto;
		display: block;
		margin-inline: auto;
		margin-top: 20px;
	}

	.footerNav ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}

	.footerNav ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
		margin: 0 auto;
	}

	.footerNav ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.termsConditions ul {
		width: min(100%, 600px);
		/* height: 130px; */
		height: auto;
		display: block;
		margin-inline: auto;
	}

	.termsConditions ul li {
		width: min(100%, 300px);
		height: 40px;
		display: block;
		margin: 0 auto 10px;
	}

	.termsConditions ul li a {
		width: 100%;
		height: 30px;
		line-height: 30px;
		display: block;
	}

	.termsConditions ul li a:hover {
		box-shadow: 0 0 20px #fff, inset 0 0 20px #fff, 0 0 0px #fff, 0 0 0px red, 0 0 0px red, 0 0 20px red,0 0 20px red, inset 0 0 20px red;
	 	color: red;
	 	text-shadow: 3px 3px 3px rgba(255, 0, 0, 0.4);
		border: transparent;
	}

	.footerContactCopy {
		display: block;
		width: min(100%, 600px);
		height: auto;
		margin-top: 80px;
	}

	.address p {
		text-align: center;
		color: #fff;
	}

	.contact p {
		text-align: center;
		color: #fff;
	}
}