@media screen and (max-width:1000px) {

	header, article {
		max-width: 768px;
		width: 100%;
	}

/* BOX 
-----------------------------------------------------------------------------------*/
	.explanation .explanation-inner {
		background-size: 1000px auto;
		padding: 55px calc(50vw - 50%);
	}
	.explanation .explanation-inner::before {
		left: -98px;	
	}
	.explanation .explanation-inner::after {
		right: -98px;
	}

/* layout 
-----------------------------------------------------------------------------------*/
	.column-2 .w2 {
		width: 100%;
	}

/* H style 
-----------------------------------------------------------------------------------*/

	.h-03 { /*32 → 26*/
		font-size: 1.625rem;
	}
	.h-04 { /* 38 → 32*/
		font-size: 1.5em;
	}
	.h-06 { /*54 → 48*/
		font-size: 3rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	.tx-05 { /*21 → 18*/
		font-size: 1.125rem;
	}
	.tx-06 { /*24 → 21*/
		font-size: 1.3125rem;
	}


/* parts style 
-----------------------------------------------------------------------------------*/
	.page-menu ul {
		padding: 0;
	}
	header .g-nav li {
		padding-left: .7em;
		font-size: 0.9375em;
	}

/* top page
-------------------------------------------*/
	.lead, .our-thoughts {
		max-width: 768px;
	}
	#top_index header .main-logo {
		width: 529px;
	}
	.cover-copy .copy-jp {
		background-size: 1050px auto;
	}
	.cover-copy .copy-en {
		background-size: 1050px auto;
		margin-top: -226px;
	}
	.w-pickup {
		width: 500px;
		margin-top: 50px;
	}
	.w-pickup h2 {
		top:-40px;
	}
	.w-pickup h2 img {
		width: 320px;
		height: 90px;
	}
	.w-pickup .youtube-caution {
		left: -205px;
	}
	.w-pickup .youtube-caution img {
		width: 195px;
		height: auto;
	}
	.our-thoughts .text-area {
		padding-left: 238px;
	}
	.our-thoughts .wakuwaku {
		background-size: 131px auto;
		width: 131px;
		height: 658px;
		left: 36px;
		top: -10px;
	}
	.slogan .our-directiion {
		background-size: 100% auto;
		height: 100px;
	}
	.slogan .for-directions {
		background-size: 100% auto;
		height: 105px;
		margin:-100px  calc(50% - 50vw) 0;
	}

/* lower page
-------------------------------------------*/
	.slogan .our-directiion img ,
	.slogan .for-your-contents img, .slogan .for-your-direction img, .slogan .for-your-value img, .slogan .for-all-direction img {
		width: 110%;
		margin-left: -5%;
	}

	.trading {
		display: none;
	}
	.reason01, .reason02, .reason03, .reason04 ,.reason05 {
		background-size: 1000px auto;
	}
	.reason01 {height: 180px;}
	.reason02 {height: 184px;}
	.reason03 {height: 183px;}
	.reason04 {height: 180px;}
	.reason05 {height: 183px;}

	.tag-area {
		max-width: 768px;
	}
	.tag-area li {
		font-size: 1.125em;
	}
	footer {
		background: url(../../img/footer_bg_02@2x.jpg) no-repeat center top;
		padding: 150px 0 97px 0;
		margin-top: 100px;
		background-size: auto 100%;
	}
	
	footer nav {
		justify-content: center;
		max-width: 768px;
		padding-top: 50px;
	}
	footer nav div {
		width: calc(50% - 145px);
		padding-left: 115px;
		padding-right: 30px;
	}
	footer nav li {
		font-size: 1.125em;
	}
	.ft-copy-jp {
		background-size:1028px auto;
		height: 274px;
		margin-top: -285px;
	}
	.ft-copy-en {
		background-size:1080px auto;
		height: 180px;
		margin-top: -200px;
	}
}

/*--------------------------------------------------------------
768
---------------------------------------------------------------*/
@media screen and (max-width:768px) {

	header, article {
		max-width: 668px;
		width: 100%;
	}
	body {
		font-size: 1.125em;
	}
	.g-nav-smp {display: block;}
	.nav-area {display: none;}
	.dp-n-01 {display: none;}

/* BOX 
-----------------------------------------------------------------------------------*/
	/*.explanation .explanation-inner {
		background: url(../../img/explanation_bg_02_t@2x.png) ,url(../../img/explanation_bg_02_b@2x.png);
		background-repeat: no-repeat, no-repeat;
		background-position:  center top, center bottom;
		background-size: 768px auto;
		padding: 70px calc(50vw - 50%);
	}*/
	.explanation .explanation-inner::before {
		left: -48px;	
	}
	.explanation .explanation-inner::after {
		right: -48px;
	}

/* layout 
-----------------------------------------------------------------------------------*/
	.column-2 .w3 {
		width: 100%;
	}
	.column-2 .w4 {
		width: 48%;
	}
	.column-2 .w6 {
		width: 48%;
	}

/* H style 
-----------------------------------------------------------------------------------*/
	.h-05 { /*42 → 32 */
		font-size: 2rem;
	}
	.h-06 { /*54 → 48 → 42*/
		font-size: 2.625rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	.tx-03 { /*14 → 16*/
		font-size: 1rem;
	}

	.tx-05 { /*21 → 18 */
		font-size: 1.125rem;
	}

/* align style 
-----------------------------------------------------------------------------------*/
	.aling-c img {
		width: 80%;
		height: auto;
		max-width: 600px;
}

/* parts style 
-----------------------------------------------------------------------------------*/
/* top page
-------------------------------------------*/
	.lead, .our-thoughts {
		max-width: 668px;
	}
	#top_index header .main-logo {
		order: 0;
		width: 539px;
		margin-top: 172px;
		position: relative;
		z-index: 2;
	}
	.cover-copy {
		margin-bottom: 65px;
	}
	.cover-copy .copy-jp {
		background-size: 820px auto;
		margin-top: -77px;
		height: 214px;
	}
	.cover-copy .copy-en {
		background-size: 820px auto;
		margin-top: -246px;
		height: 115px;
	}
	.top-news {
		float: none;
	}
	.w-pickup {
		width: calc(100% - 100px);
		float: none;
		padding:30px 50px 0;
	}
	.w-pickup h2 {
		top:-10px;
	}
	.w-pickup h2 img {
		width: 320px;
		height: auto;
	}
	.w-pickup .youtube-caution {
		display: none;
	}

	.logo-anime .logo-parts-e {
		top: 320px;
	}
	.logo-anime .logo-parts-n {
		top: 220px;
	}
	.logo-anime .logo-parts-ta {
		top: 120px;
	}
	.logo-anime .logo-parts-mi {
		top: 20px;
	}
	.logo-anime .logo-parts-na {
		top: -80px;
	}

	.our-thoughts {
		padding-top: 130px;
	}
	.our-thoughts .text-area {
		padding-left: 187px;
	}
	.our-thoughts .text-area p:last-child {
		margin-bottom: 1em;
	}
	.our-thoughts .wakuwaku {
		background-size: 119px auto;
		width: 119px;
		height: 567px;
		left: 22px;
		top: -100px;
	}
	#top_index .slogan .our-directiion {
		background-size: 768px auto;
		background-position: right 0;
		height: 95px;
	}
	#top_index .slogan .for-directions {
		background-size: 768px auto;
		background-position: right 0;
		height: 95px;
		margin:-95px  calc(50% - 50vw) 0;
	}
	.service-list-banner{
		margin-top: 0;
	}
	.service-list-banner li	{
		width: calc(100% / 2);
	}
	.service-list-banner ul::after	{
		content: "";
		display: block;
		width: 50%;
	}
/* lower page style
-----------------------------------------*/
	header .main-logo {
		width: 181px;
		margin-top: 50px;
		position: relative;
		z-index: 2;
	}
	header .breadcrumbs {
		position: relative;
		z-index: 2;
	}
	header .breadcrumbs li {
		font-size: 0.875em;
	}
	.slogan .our-directiion img , .slogan .for-your-contents img, .slogan .for-your-direction img, .slogan .for-your-value img, .slogan .for-all-direction img {
		width: 110%;
		margin-left: -10%;
	}
	.page-menu ul {
		flex-wrap: wrap;
		justify-content: left;
	}
	.page-menu li {
		width: 50%;
		margin-bottom: 20px;
		text-align: center;
	}

	.slogan .our-directiion img ,
	.slogan .for-your-contents img, .slogan .for-your-direction img, .slogan .for-your-value img, .slogan .for-all-direction img {
		width: 120%;
		margin-left: -15%;
	}

	.reason01, .reason02, .reason03, .reason04 ,.reason05 {
		background-size: 768px auto;
	}
	.reason01 {height: 139px;}
	.reason02 {height: 141px;}
	.reason03 {height: 140px;}
	.reason04 {height: 139px;}
	.reason05 {height: 140px;}

	#publications {
		width: 100%;
	}
	#publications .w3 {
		width: 24%;
		max-width: 320px;
	}
	.tag-area {
		max-width: 668px;
	}
	.tag-area li {
		font-size: 1em;
		line-height: 46px;
		border-radius: 23px;
	}
	.tag-area li a {
		padding: 0 23px;
	}
	footer {
		background: url(../../img/footer_bg_02@2x.jpg) no-repeat center top;
	}
	
	footer nav {
		max-width: 668px;
		padding-top: 50px;
		column-gap: 30px;

	}
	footer nav div {
		width: 35%;
		padding-right: 0px;
		padding-left: 0;
	}
	footer nav li {
		font-size: 1em;
	}
	.ft-copy-jp {
		background-size:788px auto;
		height: 209px;
		margin-top: -253px;
	}
	.ft-copy-en {
		background-size:900px auto;
		height: 150px;
		margin-top: -172px;
	}


/* margin 
-----------------------------------------------------------------------------------*/
	.mt-04m {margin-top: -30px;}
}

/*--------------------------------------------------------------
500
---------------------------------------------------------------*/
@media screen and (max-width:500px) {

	header, article {
		max-width: 310px;
	}
	.dp-n-01 {display: block;}

/* BOX 
-----------------------------------------------------------------------------------*/
.explanation .explanation-inner {
		padding: 0;
		background-image: none;
		margin-left: -10%;
		margin-right: -10%;		
		
	}
	.explanation .explanation-inner::before, 
	.explanation .explanation-inner::after {
		display: block;
		width: 45px;
	}
	.explanation .explanation-inner::before {
		top: -17px;
	}
	.explanation .explanation-inner::after {
		bottom: -27px;
	}
	.explanation .explanation-inner p{
		border: 1px solid #ccc;
		padding:32px ;
		max-width: 100%;
	}

	.rainbow-box {
		padding: 25px;
	}

/* layout 
-----------------------------------------------------------------------------------*/
	.cnts-center {
		width: 310px;
	}
	.column-2 .w4 {
		width: 100%;
	}
	.column-2 .w6 {
		width: 100%;
	}
/* H style 
-----------------------------------------------------------------------------------*/
	.h-03 { /*32 → 26 → 18*/
		font-size: 1.125rem;
	}
	.h-04 { /* 38 → 32 → 24*/
		font-size: 1.5rem;
	}
	.h-05 {
		font-size: 1.5rem;
	}
	.tx-06 { /*24 → 21 → 18*/
		font-size: 1.125rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	.tx-04 { /*18 → 16*/
		font-size: 1rem;
	}
	.smp-tx-01 {
		font-size: 0.875em;
	}
/* link 
-----------------------------------------------------------------------------------*/
	.btn {
		font-size: 1em;
	}
/* align style 
-----------------------------------------------------------------------------------*/
	.aling-c {
		width: 100vw;
		margin: 0 0 0 calc(50% - 50vw);
	}
	.aling-c img {
		width: 120%;
		height: auto;
		margin-left: -10%;
	}

/* parts style 
-----------------------------------------------------------------------------------*/
.dp-b-01 {	display: none; }

/* top page
-------------------------------------------*/
	.lead, .our-thoughts {
		max-width: 310px;
	}
	#top_index header {
		justify-content: right;
	}
	#top_index header .main-logo {
		width: 100%;
		margin-top: 186px;
		order: 2;
	}
	.cover-copy {
		margin-bottom: 0;
	}
	.cover-copy .copy-jp {
		background: url(../../img/top_cover_copy01_smp@2x.png) no-repeat center top;
		background-size: 394px auto;
		margin-top: -37px;
		height: 177px;
	}
	.cover-copy .copy-en {
		background: url(../../img/top_cover_copy02_smp@2x.png) no-repeat center top;
		background-size: 568px auto;
		margin-top: -246px;
		height: 94px;
	}
	.top-news {
		width: 100%;
	}
	.top-news .column-2l {
		display: block;
	}
	.top-news .date {
		font-size: 0.625rem;
		margin-bottom: 5px;
		float: none;
	}
	.top-news .news-txt {
		font-size: 0.875rem;
		float: none;
	}
	.w-pickup {
		width: 100%;
		float: none;
		padding:0;
	}
	.w-pickup h2 {
		top:-25px;
		right: 19px;
	}
	.w-pickup h2 img {
		width: 190px;
		height: auto;
	}
	.logo-anime {
		top: -40px;
	}
	.our-thoughts{
		padding-top: 100px;
	}
	.our-thoughts .text-area {
		padding-left: 0;
	}
	.our-thoughts h2 {
		text-align: center;
	}
	.our-thoughts .text-area p:last-child {
		margin-bottom: 1.5em;
	}
	.our-thoughts .wakuwaku {
		display: none;
	}
	#top_index .slogan .our-directiion {
		background-size: 700px auto;
		background-position: right -80px top;
		height: 65px;
	}
	#top_index .slogan .for-directions {
		background-size: 700px auto;
		background-position: right -5px top;
		height: 78px;
		margin:-43px  calc(50% - 50vw) 0;
	}
	.service-list-banner li	{
		width: 100%;
	}
/* lower page
-------------------------------------------*/
	header .main-logo {
		width: 211px;
		margin-top: 44px;
	}
	.hamburger {
		top: 44px;
	}
	header .breadcrumbs {
		display: none;
	}

	h1 span + br + span {
	    margin-top: 13px;
    	margin-bottom: 13px;
	}
	.slogan .our-directiion{
		margin-top: 10px;
	}
	.slogan .our-directiion img , .slogan .for-your-contents img, .slogan .for-your-direction img, .slogan .for-your-value img, .slogan .for-all-direction img, .slogan .delivering-LIVE img {
		width: 140%;
		margin-left: -28%;
	}
	.slogan .for-your-contents img, .slogan .for-your-direction img, .slogan .for-all-direction img {
		margin-left: -35%;
	}
	.slogan .for-your-contents, .slogan .for-your-direction, .slogan .for-all-direction {
		top: 15px;
	}
	.page-menu li {
		width: 100%;
		text-align: center;
	}

	.explanation .explanation-inner p {
		font-size: 1em;
	}
	.reason01, .reason02, .reason03, .reason04 ,.reason05 {
		background-size: 375px auto;
	}
	.reason01 {height: 68px;}
	.reason02 {height: 69px;}
	.reason03 {height: 69px;}
	.reason04 {height: 68px;}
	.reason05 {height: 69px;}

	#publications .w3 {
		width: 48%;
	}
	#publications .column-2 {
		row-gap: 10px;
	}

	.tag-area {
		max-width: 310px;
		padding-top: 0;
	}
	.tag-area li {
		font-size: .875em;
		line-height: 34px;
		border-radius: 17px;
	}
	.tag-area li a {
		padding: 0 17px;
	}


	footer {
		background: url(../../img/footer_bg_02@2x.jpg) no-repeat center top;
		padding: 150px 0 97px 0;
		margin-top: 40px;
		background-size: auto 100%;
	}	
	footer nav {
		max-width: 310px;
		padding-top: 0;
	}
	footer nav div {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	footer nav h3 {
		font-size: 1em;
	}
	footer nav ul {
		margin:5px 0 45px 0;
	}
    footer nav li {
		font-size: 1em;
	}
	.ft-copy-jp {
		background-size:387px auto;
		height: 103px;
		margin-top: -200px;
	}
	.ft-copy-en {
		background-size:600px auto;
		height: 100px;
		margin-top: -175px;
	}


/* margin 
-----------------------------------------------------------------------------------*/
	.mb-03 {margin-bottom: 40px;}
	.mb-05 {margin-bottom: 70px;}
	.mb-06 {margin-bottom: 70px;}
	.mt-04m {margin-top: -15px;}
}