@charset "utf-8";
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: break-all;
word-wrap: break-word;
}
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 16px;
line-height: 1.3;
}
body {
padding: 0;
margin: 0;
background: #fff;
color: #000;
font-size: 100%;
font-family: 'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック';
font-family: 'Noto Sans JP', sans-serif;
font-weight: normal;
width: 100%;
height: 100%;
}
li{
list-style: none;
}
ul::before,
ul::after,
ol::before,
ol::after,
dl::before,
dl::after {
display: none;
}
img {
max-width: 100%;
vertical-align: top;
}
a {
color: #000;
}
/* reset end */




/* wrap */
#wrap {
min-width: 320px;
overflow: hidden;
line-height: 1.7;
}
#header {
min-width: 320px;
}
#wrap * {
box-sizing: border-box;
}
#wrap img {
vertical-align: top;
height: auto;
}
	@media screen and (max-width: 768px) {
	html {
	font-size: 15px;
	}
	#wrap {
	}
	}
/* wrap end */

/* area */
.area {
position: relative;
padding: 50px 20px;
box-sizing: border-box;
}
.inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1220px;
margin: 0 auto;
box-sizing: border-box;
}
.pc {
display: block;
}
.sp {
display: none;
}
	@media screen and (max-width: 768px) {
	.area {
	padding: 30px 20px;
	}
	.inner {
	max-width: 100%;
	}
	.pc {
	display: none;
	}
	.sp {
	display: block;
	}
	}
/* area end */

/* item */
.btn a {
width: 650px;
background: #000;
color: #fff;
display: block;
margin: 0 auto 70px;
text-align: center;
font-size: 1.7rem;
font-weight: 700;
padding: 30px 0;
text-decoration: none;
transition: .3s;
}
.btn a:hover {
opacity: 0.7;
opacity: 1;
background: #549EF8;
}
.ttl01 {
font-weight: 700;
font-size: 2.5rem;
margin: 0;
margin-bottom: 50px;
line-height: 1.4;
}
.ttl01 .small {
display: block;
font-size: 1.5rem;
}
.ttl02 {
font-weight: 700;
font-size: 2rem;
margin: 0;
margin-bottom: 40px;
}
.ttl02 .small {
display: block;
font-size: 1.5rem;
}
.bold {
font-weight: 700;
}
.yellow {
color: #f6ff00;
}
.caution {
font-size: 0.9rem;
margin-top: 20px;
}
.row_box {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.row_box .img {
width: 50%;
}
.row_box .txt_box {
width: 50%;
margin-right: 30px;
}
.btn_more a {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 40px;
background: #000;
text-align: center;
margin: 0 auto;
text-decoration: none;
transition: .3s;
}
.btn_more a:hover {
opacity: 0.7;
opacity: 1;
background: #549EF8;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
.ttl02 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.ttl02 .small {
font-size: 1.2rem;
}
}
	@media screen and (max-width:768px) {
	.btn a {
	width: 100%;
	margin: 0 auto 50px;
	font-size: 1.2rem;
	padding: 20px 0;
	}
	.ttl01 {
	font-size: 1.5rem;
	margin-bottom: 30px;
	}
	.ttl02 {
	font-size: 1.3rem;
	margin-bottom: 20px;
	}
	.ttl02 .small {
	font-size: 1.1rem;
	}
	.row_box {
	flex-flow: column;
	}
	.row_box .img {
	width: 100%;
	}
	.row_box .txt_box {
	width: 100%;
	margin-right: 0;
	}
	.btn_more a {
	width: 180px;
	height: 40px;
	}
	.caution {
	font-size: 0.9rem;
	}
	}
/* item end */

/* header */
#header {
background: linear-gradient(180deg, #549ef8 0%, #549ef8 70%, #76b1f9 70%, #76b1f9 100%);
}
#header.area {
padding: 0 0 0 20px;
}
#header .inner {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: space-between;
}
#header .visual_txt_box {
min-height: 100%;
width: 45%;
font-weight: 700;
}
#header .visual_ttl {
height: 70%;
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1.4;
padding-right: 20px;
}
#header .visual_ttl > * {
font-size: 3rem;
}
#header .visual_ttl span {
display: inline;
color: #fff;
font-size: 3.8rem;
}
#header .logo {
height: 30%;
margin-top: 30px;
}
#header .logo img {
max-width: 249px;
}
#header .visual_img {
width: 55%;
display: flex;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
#header .visual_ttl {
font-size: 1.8rem;
}
#header .visual_ttl > * {
font-size: 1.8rem;
}
#header .visual_ttl span {
font-size: 2.5rem;
}
#header .logo img {
max-width: 200px;
}
}
	@media screen and (max-width:768px) {
	#header {
	background: none;
	}
	#header.area {
	padding: 0;
	}
	#header .inner {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	}
	#header .visual_txt_box {
	min-height: inherit;
	width: 100%;
	}
	#header .visual_ttl {
	height: inherit;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 1.5rem;
	padding-right: 0;
	background: #549ef8;
	padding: 30px 20px;
	}
	#header .visual_ttl > * {
	font-size: 1.5rem;
	}
	#header .visual_ttl span {
	font-size: 2.3rem;
	}
	#header .logo {
	height: inherit;
	margin-top: 0;
	background: #76b1f9;
	padding: 20px;
	}
	#header .logo img {
	max-width: 150px;
	}
	#header .visual_img {
	width: 100%;
	background: #549EF8;
	}
	#header .visual_img img {
	width: 100%;
	}
	}

/* footer
-------------------------------------------------------*/
#footer02 {
text-align: center;
font-weight: 700;
}
#footer02.area {
padding: 80px 20px;
}
#footer02 ul {
margin-bottom: 40px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
#footer02 ul li:not(:last-child) {
margin-right: 20px;
position: relative;
}
#footer02 ul li:not(:last-child)::after {
position: absolute;
display: block;
content: "/";
right: -13px;
top: 0;
}
#footer02 ul a {
text-decoration: none;
transition: .3s;
}
#footer02 ul a:hover {
opacity: 0.7;
}
	@media screen and (max-width:768px) {
	#footer02.area {
	padding: 40px 20px;
	}
	#footer02 ul {
	margin-bottom: 30px;
	flex-flow: column;
	}
	#footer02 ul li:not(:last-child) {
	margin-right: 0;
	margin-bottom: 10px;
	}
	#footer02 ul li:not(:last-child)::after {
	position: inherit;
	display: none;
	}
	#footer02 .copy {
	}
	}

/* pagetop */
#pagetop {
position: fixed;
right: 10px;
bottom: -100px;
transition: all 0.3s linear;
opacity: 0;
z-index: 100;
}
#pagetop.active {
bottom: 10px;
opacity: 0.9;
}
#pagetop:hover {
opacity: 0.6;
}
#pagetop a {
display: block;
width: 60px;
height: 60px;
border-radius: 30px;
background: rgba(0,0,0,0.8);
text-indent: -9999px;
}
#pagetop a:before {
content: "";
position: absolute;
right: 50%;
top: 50%;
width: 15px;
height: 15px;
margin: -6px -9px 0 0;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
}
	@media screen and (max-width: 768px) {
	#pagetop.active,
	#pagetop:hover {
	opacity: 0.8;
	}
	#pagetop a {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	}
	#pagetop a:before {
	width: 10px;
	height: 10px;
	margin: -4px -6px 0 0;
	}
	}
/* pagetop end */

/* timer */
#timer {
background: #000;
color: #fff;
text-align: center;
font-weight: 700;
line-height: 1;
}
#timer.area {
padding: 20px;
}
#timer .inner {
position: relative;
}
#timer .timer_ttl {
position: absolute;
background: #fff;
color: #549ef8;
font-size: 2.2rem;
display: inline-block;
padding: 15px 50px;
left: 0;
top: -100px;
}
#timer .timer_ttl::after {
position: absolute;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: transparent #fff transparent transparent;
border-width: 0px 47px 47px 0px;
left: 35%;
}
#timer .timer {
font-size: 2.5rem;
}
#timer .timer.notimer {
font-size: 1.5rem;
line-height: 1.4;
}
#timer .timer span {
font-size: 3.8rem;	font-size: 3.8rem;
}	}
@media screen and (min-width:768px) and ( max-width:1080px) {
#timer .timer_ttl {
font-size: 1.5rem;
padding: 15px 30px;
left: 0;
top: -60px;
}	
#timer .timer_ttl::after {
border-width: 0px 30px 30px 0px;
}
#timer .timer {
font-size: 2rem;
}
	#timer .timer.notimer {
font-size: 1.3rem;
}
#timer .timer span {
font-size: 3rem;
}
}
	@media screen and (max-width:768px) {
	#timer.area {
	padding: 10px 20px;
	}
	#timer .timer_ttl {
	font-size: 1.2rem;
	padding: 15px 20px;
	top: -65px;
	}
	#timer .timer_ttl::after {
	border-width: 0px 35px 35px 0px;
	left: 20%;
	}
	#timer .timer {
	font-size: 1.2rem;
	}
			#timer .timer.notimer {
font-size: 1.1rem;
}
	#timer .timer span {
	font-size: 2rem;
	}		
	}
/* timer end */

/* area01 */
#area01 {
background: #333333;
color: #fff;
}
#area01 .top_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
margin-bottom: 50px;
}
#area01 .top_box .img {
width: 65%;
}
#area01 .top_box .txt {
width: 25%;
margin-left: -3%;
}
#area01 .txt span {
background: #549ef8;
color: #fff;
display: inline-block;
font-weight: 700;
font-size: 2rem;
line-height: 1;
padding: 15px 30px;
margin: 10px 0;
white-space: nowrap;
}
.list_support {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
}
.list_support li {
width: 30%;
}
.list_support li .ttl {
border-bottom: 1px solid #fff;
font-size: 1.5rem;
font-weight: 700;
padding: 0 0 20px;
margin-bottom: 20px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
#area01 .top_box .txt {
margin-left: -10%;
}
#area01 .txt span {
font-size: 1.8rem;
padding: 15px 20px;
}
.list_support li .ttl {
font-size: 1.3rem;
}
}
	@media screen and (max-width:768px) {
	#area01 .top_box {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 30px;
	}
	#area01 .top_box .img {
	width: 100%;
	}
	#area01 .top_box .txt {
	width: 80%;
	margin-left: 0;
	margin-top: -10%;
	}
	#area01 .txt span {
	font-size: 1.4rem;
	padding: 10px 20px;
	margin: 5px 0;
	}
	.list_support {
	flex-flow: column;
	align-items: flex-start;
	justify-content: space-between;
	}
	.list_support li {
	width: 100%;
	}
	.list_support li:not(:last-child) {
	margin-bottom: 30px;
	}
 	.list_support li .ttl {
	font-size: 1.3rem;
	}
	}

/* area02 */
#area02 {
border-bottom: 1px solid #000;
}
#area02 .txt {
margin-bottom: 30px;
}
@media screen and (max-width:768px) {

}

/* area03 */
.list_merit li {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.list_merit li:nth-child(2n) {
flex-flow: row-reverse;
}
.list_merit li:not(:last-child) {
margin-bottom: 30px;
}
.list_merit li .img {
width: 50%;
}
.list_merit li .txt_box {
width: 50%;
margin-left: 30px;
margin-top: 15px;
}
.list_merit li:nth-child(2n) .txt_box {
margin-left: 0;
margin-right: 30px;
}
#area03 .caution {
text-align: right;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
.list_merit li .txt_box {
margin-top: 0;
}
}
	@media screen and (max-width:768px) {
	.list_merit li {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	}
	.list_merit li:nth-child(2n) {
	flex-flow: column;
	}
	.list_merit li:not(:last-child) {
	margin-bottom: 30px;
	}
	.list_merit li .img {
	width: 100%;
	}
	.list_merit li .txt_box {
	width: 100%;
	margin-left: 0;
	margin-top: 15px;
	}
	.list_merit li:nth-child(2n) .txt_box {
	margin-left: 0;
	margin-right: 0;
	}
	}

/* area04 */
#area04 {
background: #e8e8e8;
}
.list_data {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: space-between;
margin-bottom: 50px;
}
.list_data li {
width: 48%;
background: #fff;
padding: 30px 30px 90px 30px;
box-sizing: border-box;
position: relative;
}
.list_data li .ttl {
font-weight: 700;
font-size: 1.5rem;
border-left: 3px solid #000;
padding-left: 20px;
margin-bottom: 30px;
line-height: 1.4;
}
.list_data li:nth-child(2) .ttl {
margin-bottom: 100px;
}
.list_data li .img {
margin-bottom: 50px;
}
.list_data li .sub_ttl {
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 20px;
}
.list_data li .caution {
position: absolute;
bottom: 30px;
}
.btm_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.btm_box .img {
width: 65%;
}
.btm_box .txt {
width: 45%;
background: #fff;
padding: 35px;
margin-left: -160px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
.list_data li .ttl {
font-size: 1.3rem;
}
.list_data li .ttl br {
display: none;
}
}
	@media screen and (max-width:768px) {
	.list_data {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 30px;
	}
	.list_data li {
	width: 100%;
	padding: 30px 20px;
	}
	.list_data li:not(:last-child) {
	margin-bottom: 30px;
	}
	.list_data li .ttl {
	font-size: 1.2rem;
	}
	.list_data li:nth-child(2) .ttl {
	margin-bottom: 30px;
	}
	.list_data li .img {
	margin-bottom: 20px;
	}
	.list_data li .sub_ttl {
	font-size: 1.2rem;
	margin-bottom: 20px;
	}
	.list_data li .caution {
	position: inherit;
	bottom: inherit;
	}
	.btm_box {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	}
	.btm_box .img {
	width: 90%;
	}
	.btm_box .txt {
	width: 90%;
	padding: 20px;
	margin-left: 0;
	box-sizing: border-box;
	margin: -30px 0 0 auto;
	}
	}

/* area05 */
#area05 .ttl01 {
margin-bottom: 20px;
}
#area05 .txt_box {
margin-right: 0;
margin-left: 30px;
}
	@media screen and (min-width:768px) and ( max-width:1080px) {
	#area05 .ttl01 {
	font-size: 1.5rem;
	}
	#area05 .ttl01 .small {
	font-size: 1.2rem;
	}
	}
	@media screen and (max-width:768px) {
	#area05 .ttl01 {
	margin-bottom: 10px;
	}
	#area05 .txt_box {
	margin-right: 0;
	margin-left: 0;
	margin-top: 20px;
	}
	}

/* area06 */
#area06 {
background: #333333;
}
#area06.area {
padding: 90px 20px 0;
}
#area06 .inner {
position: relative;
}
#area06 .ttl_blue {
background: #549ef8;
color: #fff;
font-size: 2rem;
font-weight: 700;
display: inline-block;
padding: 10px 40px;
position: absolute;
left: 0;
top: -120px;
}
#area06 .ttl_blue::after {
position: absolute;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: transparent #549ef8 transparent transparent;
border-width: 0px 47px 47px 0px;
left: 35%;
}
#area06 .txt {
color: #fff;
margin-bottom: 70px;
}
#area06 .img {
display: flex;
}
	@media screen and (min-width:768px) and ( max-width:1080px) {
	#area06 .ttl_blue {
	font-size: 1.5rem;
	}
	}
	@media screen and (max-width:768px) {
	#area06.area {
	padding: 60px 0 0;
	}
	#area06 .ttl_blue {
	font-size: 1.2rem;
	padding: 10px 20px;
	left: 20px;
	top: -80px;
	}
	#area06 .ttl_blue::after {
	border-width: 0px 30px 30px 0px;
	left: 20%;
	}
	#area06 .txt {
	margin-bottom: 40px;
	padding: 0 20px;
	}
	}

/* area07
-------------------------------------------------------*/
#area07 {
background: #549ef8;
}
.ttl_l {
font-size: 3rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 50px;
}
.ttl_l .black {
font-size: 4rem;
color: #000;
display: block;
}
#area07 .row_box {
align-items: center;
}
#area07 .row_box .img {
width: 65%;
}
#area07 .row_box .txt_box {
background: #fff;
width: 45%;
background:#fff;
padding: 30px 30px 50px;
margin-right: -160px;
z-index: 5;
}
#area07 .row_box .txt_box .ttl {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 20px;
}
#area07 .row_box .txt_box .txt {
margin-bottom: 30px;
}
#area07 .row_box .logo {
text-align: center;
}
#area07 .row_box .logo img {
max-width: 300px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
.ttl_l {
font-size: 2.5rem;
}
.ttl_l .black {
font-size: 3.8rem;
}
#area07 .row_box .txt_box {
margin-right: -50px;
}
#area07 .row_box .logo img {
max-width: 200px;
}
}
	@media screen and (max-width:768px) {
	.ttl_l {
	font-size: 1.5rem;
	margin-bottom: 30px;
	}
	.ttl_l .black {
	font-size: 1.2rem;
	}
	#area07 .row_box {
	align-items: flex-start;
	}
	#area07 .row_box .img {
	width: 100%;
	text-align: right;	
	margin-top: -20px;
	z-index: 5;
	position: relative;
	}
	#area07 .row_box .img img {
	width: 80%;
	}
	#area07 .row_box .txt_box {
	width: 90%;
	padding: 20px 20px 40px;
	margin-right: 0;
	box-sizing: border-box;
	}
	#area07 .row_box .txt_box .ttl {
	font-size: 1.2rem;
	margin-bottom: 20px;
	}
	#area07 .row_box .txt_box .txt {
	margin-bottom: 20px;
	}
	#area07 .row_box .logo img {
	max-width: 150px;
	}
	}
	@media screen and (max-width:500px) {
	#area07 .row_box .txt_box .ttl {
	font-size: 1.1rem;
	}
	}

/* area08
-------------------------------------------------------*/
#area08 {
background: #76b1f9;
}
#area08 .logo {
margin-bottom: 50px;
}
#area08 .logo img {
max-width: 249px;
}
/*
.list_aipc {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: space-between;
}
.list_aipc li {
width: 31%;
background: #fff;
padding: 30px 20px;
box-sizing: border-box;
}
.list_aipc li .ttl {
text-align: center;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 30px;
}
.list_aipc li .img {
margin-bottom: 20px;
}
.list_aipc li .txt {
margin-bottom: 20px;
}
*/
.list_aipc {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 40px;
}
.list_aipc li  {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
gap: 0;
background: #fff;
padding: 30px 20px;
}
.list_aipc li .ttl {
text-align: center;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 30px;
}
.list_aipc li .img {
margin-bottom: 20px;
text-align: center;
}
.list_aipc li .txt {
margin-bottom: 20px;
}
	@media screen and (max-width:768px) {
	#area08 .logo {
	margin-bottom: 30px;
	}
	#area08 .logo img {
	max-width: 150px;
	}
	.list_aipc {
	padding: 0;
	gap: 0;
	}
	.list_aipc li {
	margin-bottom: 20px;
	}
	.list_aipc li:not(:last-child) {
	margin-bottom: 30px;
	}
	.list_aipc li .ttl {
	margin-bottom: 20px;
	font-size: 1.2rem;
	}
	.list_aipc li .img {
	width: 80%;
	text-align: center;
	margin: 0 auto 20px;
	}
	}

/* pc_detail
-------------------------------------------------------*/
.pc_detail .inner {
border: 1px solid #000;
}
.pc_detail .top_box {
padding: 50px 30px 30px;
}
.pc_ttl {
font-size: 2.3rem;
font-weight: 700;
border-left: 3px solid #000;
padding-left: 30px;
margin-bottom: 20px;
}
.spec_box {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.spec_box .img {
width: 50%;
}
.spec_box .spec_logo {
text-align: right;
padding-bottom: 10px;
position: absolute;
right: 50px;
top: 50px;
}
.spec_box .spec_logo img {
max-width: 150px;
}
	@media screen and (min-width:768px) and ( max-width:900px) {
	.spec_box .spec_logo {
	right: 20px;
	top: 20px;
	}
	.area.pc_detail .pc_ttl {
	font-size: 2.0rem;
	}
	.spec_box .spec_logo img {
	max-width: 120px;
	}
	}
	@media screen and (max-width:768px) {
	.spec_box .spec_logo {
	position: relative;
	width: 100%;
	text-align: center;
	right: inherit;
	top: inherit;
	}
	.spec_box .spec_logo img {
	width: 30%;
	}
	}
.spec_box .spec_txt_box {
width: 50%;
}
.spec_box .spec_txt_box .ttl {
font-size: 2rem;
font-weight: 700;
border-bottom: 1px solid #000;
padding-bottom: 20px;
margin-bottom: 20px;
}
.spec_box .spec_txt_box .txt {
font-size: 1.1rem;
margin-bottom: 30px;
}
.spec_box .spec_txt_box .btn_more a {
width: 220px;
height: 50px;
}
.bg_black {
background: #333333;
color: #fff;
padding: 50px 30px;
}
.list_pc_detail {
max-width: 1000px;
max-width: 800px;
margin: 0 auto;
padding: 30px 0;
}
.list_pc_detail li {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #fff;
}
.list_pc_detail li:nth-child(2n) {
flex-flow: row-reverse;
}
.list_pc_detail li .img {
flex: 0 1 305px;
}
.list_pc_detail li .box {
flex: 1 0 0%;
padding-right: 30px;
}
.list_pc_detail li .box .ttl {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.list_pc_detail li:nth-child(2n) .box {
margin-right: 0;
margin-left: 30px;
}
.pc_detail .review {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.pc_detail .review .img {
width: 50%;
}
.pc_detail .review .review_txt {
position: relative;
width: 50%;
margin-left: -60px;
}
.pc_detail .review .review_txt .ttl {
background: #549ef8;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
display: inline-block;
padding: 10px 20px;
position: relative;
}
.pc_detail .review .review_txt .ttl::after {
position: absolute;
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-color: #549ef8 transparent transparent transparent;
border-width: 24px 24px 0px 0px;
bottom: -24px;
left: 20px;
}
.pc_detail .review .review_txt .txt {
color: #000;
background: #fff;
padding: 40px 30px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
.pc_detail .review {
align-items: flex-start;
}
.pc_detail .review .review_txt {
width: 70%;
margin-left: -40px;
margin-top: 20px;
}
}
	@media screen and (max-width:768px) {
	.pc_detail .top_box {
	padding: 30px 20px;
	}
	.pc_ttl {
	font-size: 1.4rem;
	padding-left: 20px;
	margin-bottom: 20px;
	}
	.spec_box {
	flex-flow: column;
	align-items: center;
	justify-content: center;
	}
	.spec_box .img {
	width: 100%;
	margin-bottom: 20px;
	}
	.spec_box .spec_txt_box {
	width: 100%;
	}
	.spec_box .spec_txt_box .ttl {
	font-size: 1.4rem;
	}
	.spec_box .spec_txt_box .txt {
	font-size: 1.1rem;
	}
	.bg_black {
	padding: 30px 20px;
	}
	.list_pc_detail {
	max-width: 100%;
	padding: 0;
	}
	.list_pc_detail li {
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	}
	.list_pc_detail li:nth-child(2n) {
	flex-flow: column;
	}
	.list_pc_detail li .img {
	width: 100%;
	flex: 1 0 0%;
	text-align: center;
	}
	.list_pc_detail li .box {
	width: 100%;
	margin-right: 0;
	margin-bottom: 20px;
	padding: 0;
	}
	.list_pc_detail li .box .ttl {
	font-size: 1.1rem;
	margin-bottom: 10px;
	}
	.list_pc_detail li:nth-child(2n) .box {
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 20px;
	}
	.pc_detail .review {
	flex-flow: column;
	align-items: center;
	justify-content: center;
	}
	.pc_detail .review .img {
	width: 100%;
	}
	.pc_detail .review .review_txt {
	position: relative;
	width: 100%;
	margin-left: 0;
	margin-top: -52px;
	}
	.pc_detail .review .review_txt .ttl {
	font-size: 1.2rem;
	margin-top: 0;
	}
	.pc_detail .review .review_txt .ttl::after {
	border-width: 20px 20px 0px 0px;
	bottom: -20px;
	left: 20px;
	}
	.pc_detail .review .review_txt .txt {
	padding: 20px;
	}
	}
	@media screen and (max-width:500px) {
	.pc_ttl {
	font-size: 1.2rem;
	}
	}

/* comment
-------------------------------------------------------*/
#comment.area {
padding: 0 20px 50px;
}
#comment .inner {
max-width: 1000px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
#comment .logo {
width: 35%;
text-align: center;
margin-right: 50px;
}
#comment .logo img {
max-width: 300px;
}
#comment dl {
width: 65%;
}
#comment dl dt {
font-size: 2rem;
border-bottom: 1px solid #000;
font-weight: 700;
padding-bottom: 20px;
margin-bottom: 20px;
}
	@media screen and (max-width:768px) {
	#comment.area {
	padding: 0 20px 30px;
	}
	#comment .inner {
	flex-flow: column;
	align-items: center;
	justify-content: center;
	}
	#comment .logo {
	width: 100%;
	text-align: center;
	margin-right: 0;
	margin-bottom: 50px;
	}
	#comment .logo img {
	max-width: 150px;
	}
	#comment dl {
	width: 100%;
	}
	#comment dl dt {
	font-size: 1.5rem;
	padding-bottom: 15px;
	margin-bottom: 15px;
	}	
	}


/* article
-------------------------------------------------------*/
#article {
background: #e8e8e8;
}
#article .ttl02 {
border-left: 3px solid #000;
padding-left: 30px;
}
#article li {
margin: 0 10px;
}
#article li .img {
margin-bottom: 15px;
}
#article li .txt {
font-weight: 700;
}
#article li a {
text-decoration: none;
transition: .3s;
}
#article li a:hover {
opacity: 0.7;
}
	@media screen and (max-width:768px) {
	#article .ttl02 {
	padding-left: 20px;
	}
	#article li {
	margin: 0 5px;
	}
	#article li .img {
	margin-bottom: 10px;
	}
	}


/* effect * /
@media screen and (min-width: 768px) {
.effectdelay {
opacity: 0;
transition: 0.8s;
}
.effectdelay.effect_active {
opacity: 1;
transform: translateY(0);
}
.effect {
opacity: 0;
transition: 1.2s;
transform: translateY(-70px);
}
.effect.effect_active {
opacity: 1;
transform: translateY(0);
}
}
*/
.effectdelay .visual_img > * {
display: inline-block;
opacity: 0;
transition: .6s;
translate: -10% 0;
}
.effectdelay.effect_active .visual_img > * {
opacity: 1;
translate: 0 0;
}
.effectdelay.effect_active .visual_img > *:nth-child(2) {
transition-delay: 0.5s;
}
.effectdelay.effect_active .visual_img > *:nth-child(3) {
transition-delay: 1s;
}
.effectdelay .timer_ttl {
transition: .6s;
transition-delay: 1s;
opacity: 0;
translate: 0 100px;
}
.effectdelay.effect_active .timer_ttl {
opacity: 1;
translate: 0 0;
}
#area01 .inner.effect .top_box .txt {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
#area01 .inner.effect.effect_active .top_box .txt {
opacity: 1;
translate: 0 0;
}
#area02 .inner.effect .row_box .img img {
transition: .6s;
opacity: 0;
translate: -50px 0;
display: inline-block;
}
#area02 .inner.effect.effect_active .row_box .img img {
opacity: 1;
translate: 0 0;
}
.list_merit.effectlist li .img img {
transition: .6s;
opacity: 0;
translate: 50px 0;
display: inline-block;
}
.list_merit.effectlist li:nth-child(2n) .img img {
translate: -50px 0;
}
.list_merit.effectlist li.effect_active .img img {
opacity: 1;
translate: 0 0;
}
#area04 .btm_box.effect {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
#area04 .btm_box.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#area05 .inner.effect .row_box .img img {
transition: .6s;
opacity: 0;
translate: 50px 0;
display: inline-block;
}
#area05 .inner.effect.effect_active .row_box .img img {
opacity: 1;
translate: 0 0;
}
#area06 .inner.effect .ttl_blue {
transition: .6s;
opacity: 0;
translate: 0 100px;
}
#area06 .inner.effect.effect_active .ttl_blue {
opacity: 1;
translate: 0 0;
}
#area06 .inner.effect .img > * {
display: inline-block;
opacity: 0;
transition: .6s;
translate: -10% 0;
}
#area06 .inner.effect.effect_active .img > * {
opacity: 1;
translate: 0 0;
}
#area06 .inner.effect.effect_active .img > *:nth-child(2) {
transition-delay: 0.5s;
}
#area06 .inner.effect.effect_active .img > *:nth-child(3) {
transition-delay: 1s;
}
#area07 .inner.effect .row_box {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
#area07 .inner.effect.effect_active .row_box {
opacity: 1;
translate: 0 0;
}
#pc01 .inner.effect,
#pc02 .inner.effect,
#pc03 .inner.effect {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
#pc01 .inner.effect.effect_active,
#pc02 .inner.effect.effect_active,
#pc03 .inner.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#pc01 .inner.effect .spec_box .img,
#pc02 .inner.effect .spec_box .img,
#pc03 .inner.effect .spec_box .img {
transition: .6s;
opacity: 0;
translate: 100px 0;
transition-delay: 0.5s;
}
#pc01 .inner.effect.effect_active .spec_box .img,
#pc02 .inner.effect.effect_active .spec_box .img,
#pc03 .inner.effect.effect_active .spec_box .img {
opacity: 1;
translate: 0 0;
}
.spec_txt_box {
position: relative;
z-index: 2;
}
.list_pc_detail.effectlist li .img img {
transition: .6s;
opacity: 0;
translate: 50px 0;
display: inline-block;
}
.list_pc_detail.effectlist li:nth-child(2n) .img img {
translate: -50px 0;
}
.list_pc_detail.effectlist li.effect_active .img img {
opacity: 1;
translate: 0 0;
}
.review.effect {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
.review.effect.effect_active {
opacity: 1;
translate: 0 0;
}
.review.effect .ttl,
.review.effect .txt {
transition: .6s;
opacity: 0;
translate: 0 20px;
}
.review.effect .ttl {
transition-delay: 1s;
z-index: 2;
}
.review.effect .txt {
transition-delay: 0.5s;
}
.review.effect.effect_active .ttl {
opacity: 1;
translate: 0 0;
}
.review.effect.effect_active .txt {
opacity: 1;
translate: 0 0;
}
/*
#footer02 .inner.effect .btn {
transition: .6s;
opacity: 0;
translate: 0 50px;
}
#footer02 .inner.effect.effect_active .btn {
opacity: 1;
translate: 0 0;
}
*/
/* effect end */





/*==============================

2025.05

================================*/
@media screen and (max-width:1023px) {
#header .visual_ttl > * {
    padding: 0;
}
#header .logo {
    width: 100%;
}
#timer .timer_ttl {
    font-size: 1.1rem;
}
}
#header .visual_ttl > * {
    display: block;
}
#header .logo {
    display: block;
}
#area07 .row_box .logo {
    display: block;
    float: none;
    height: auto;
}
#area08 .logo {
    display: block;
    float: none;
}
#comment .logo {
    display: block;
    float: none;
    height: auto;
}