@charset "UTF-8";
/*
ゴシック
　NotoSansJP
明朝
　NotoSerifJP
英文字
　Arial,Roboto
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://use.typekit.net/nhl6esn.css");

html{
	margin:0;
	background: #2e2e2e;
}
body{
	margin:0;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
	background: url("/dist/assets/img/ataricreate/bgimg.jpg") no-repeat top #f8f4f1;
	background-size: contain;
}
.ff--mincho {
  font-family: "游明朝", "YuMincho", yu-mincho-pr6n, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

#about{
/*	margin-top: 1em;*/
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 2em 2em 2em 0;
}
#about h2{
/*	float: left;*/
	margin: 0;
	padding: 0.25em 2em 0.25em 1em;
	background: black;
	color: white;
	border-radius: 0 100px 100px 0;
	font-style: oblique;
	white-space: nowrap;
	font-size: 2em;
}
#about h1{
/*	float: right*/
	margin: 0.25em 0 0;
}
#about h1 img{
	float: right;
	width: 200px;
}
.txtInvisible{
	text-indent: 101%;
	white-space: nowrap;
	overflow: hidden;
}
.readBox{
	max-width:1000px;
	margin: auto ;
	text-align: center;
}
.readBox .read{
	font-size: 3.5em;
	font-feature-settings: "palt";
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}
.hr-text {
	line-height: 0;
	margin: 0;
	padding: 0;
	position: relative;
	outline: 0;
	border: 0;
	color: black;
	text-align: center;
	height: 0.1px;
	opacity: .5;
}
.hr-text:before {
	content: '';
	background: -webkit-linear-gradient(left, transparent, #000000, transparent);
	background: linear-gradient(to right, transparent, #000000, transparent);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
}
.hr-text:after {
	content: attr(data-content);
	position: relative;
	display: inline-block;
	color: black;
	padding: 0 .5em;
	line-height: 1.5em;
	background-color: #fcfcfa;
}
.readBox .readTxt img{
	width: 850px;
}
.readBox .eng{
	font-size: 3em;
}
.readBox .name{
	font-size: 1.5em;
}
.readBox .mark{
	margin: 1em auto;
	width: 100px;
	background: url("/dist/assets/img/ataricreate/mark.png") no-repeat center;
	background-size: contain;
}.readBox .mark img{
	width: 100px;
}
.gradationBox{
	display: flex;
	justify-content: space-between;
	padding: 0.5em 0.75em;
	line-height: 1;
	font-size: 1.25em;
}
.gradationBox > h3{
	font-size: 1em;
}
.gradationYelToOra {
	background-image: linear-gradient(90deg, #ea652d, #f1942e 28%, #fccd00 67%, #fff21f);
}
.gradationGreToYel {
	background-image: linear-gradient(90deg, #009944, #fff100);
}
.gradationSpinkToYel {
	background-image: linear-gradient(90deg, #e94c55, #fff56b);
}
.gradationRedToYel {
  background-image: linear-gradient(90deg, #e60033, #e60033 10%, #e4007f 50%, #fff100);
}
.gradationPapToCre {
  background-image: linear-gradient(90deg, #920783, #bf7280 73%, #fbc854);
}
.gradationBluToYel {
  background-image: linear-gradient(90deg, #0062b1, #00afec 50%, #fff56b);
}
dl{
	max-width:1000px;
	margin: auto ;
	padding-bottom: 2rem;
}
	dt{
		color: white;
		margin-top: 5em;
		margin-bottom: 1em;
	}
	dt h3, dt h4{
		margin: 0;
	}
	dt h4{
		font-style: oblique;
	}
	dd{
		display: flex;
		margin: 0;
	}
	dd ul{
		box-sizing:border-box;
		width: 60%;
	}
	dd ul li{
		line-height: 1;
		list-style: none;
		padding-bottom: 1.5em;
		font-size: 1.2rem;
	}
	dd ul li:before {
		content: '';
		width: 12px;
		height: 12px;
		display: inline-block;
		border-radius: 100%;
		background: #000000;
		position: relative;
		left: -1em;
/*		top: -3px;*/
	}

	dd .adjImg{
		box-sizing:border-box;
		width: 40%;
	}

	dd img{
		width: 100%;
	}
footer{
	background: #2e2e2e;
	color: #8f8f8f;
}
.copyright{
	list-style: none;
	text-align: center;
	padding: 0.75em;
}
@media screen and (max-width:768px) {
	.readBox .readTxt img{
		width: 85%;
	}
}
@media screen and (max-width:498px) {
.readBox .read{
	font-size: 1.25em;
}
.readBox .eng{
	font-size: 1em;
}
.readBox .name{
	font-size: 1em;
}
#about{
	padding: 2em 2em 3em 0;
}
#about h2{
	font-size: 1.25em
}
#about h1 img{
	width: 100px;
}
	dl{
		max-width: auto;
		padding: 1rem;
	}
.gradationBox{
	display: inherit;
	line-height: 1.1;
	font-size: 1.4em;
	padding: 0.25em 0.75em;
}
.gradationBox > h3{
	font-size: 1.1em;
}
.gradationBox > h4{
	font-size: 0.75em;
	font-weight: normal;
}
	dd{
		flex-direction: column;
		margin: auto;

	}
	dd ul{
		width: 100%;
		padding-left: 2em;
	}
dd ul li {
	text-indent: -0.5em;
	padding-bottom: 0.75em;
	font-size: 1.1rem;
	letter-spacing: 1px;
	line-height: 1.2;
	}
dd ul li:before {
	left: -0.5em;
}
	dd .adjImg{
		min-width: 90%;
		margin: auto;
	}
}
/* PC用Mobile用 */
#forPc, .forPc{/* =.pc_visi */}
#forTablet, .forTablet, #forMobile, .forMobile{
	visibility: hidden;
	display: none;
}
@media screen and (max-width:768px)
{
	#forPc, .forPc{
		display: none;
	}
	#forTablet, .forTablet, #forMobile, .forMobile{
		visibility: visible;
		display: inherit;
	}
	.outerScroll {
		width: 100%;
		overflow-x:scroll;
	}
}
@media screen and (max-width:480px)
{
	#forPc, .forPc{
		display: none;
	}
	#forMobile, .forMobile{
		visibility: visible;
		display: inherit;
	}
	.outerScroll {
		width: 100%;
		overflow-x:scroll;
	}
}