

.yellow {
  color: #FFB219;
}

.orenge {
  color: #FF8A31;
}

@media screen and (min-width: 320px) {
  
  .entry-footer {
    margin: 0;
  }
  
  #colophon {
    background: #00000094;
	padding: 0 1em;
  }
  
  .site-footer .site-info {
    padding: 0;
	max-width: 440px;
  }
  
  #colophon .footer-logo-area .logo-innner {
    display: flex;
	margin: 40px 0 0 0
  }
  
  #colophon .footer-logo-area h2 {
    font-size: 16px;
    font-weight: 100;
	position: relative;
	margin: 0;
    max-width: 348px;
  }
  
  #colophon .footer-logo-area h2 a {
    color: white;
  }
  
  
  #colophon .footer-logo-area h2 .en-text {
    display: inline-block;
	font-size: 10px;
	font-weight: 400;
	font-family: futura-pt;
	letter-spacing: .05em;
  }
  
  #colophon .footer-logo-area h2 .ja-text {
    display: block;
	font-family: noto-sans-cjk-jp;
	font-weight: 700
  }
  
  #colophon .footer-nav-area {
    margin: 40px 0 0 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul {
    list-style: none;
	padding: 0;
    margin: 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li {
    margin-bottom: 24px;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > a {
    display: flex;
	color: white;
	flex-direction: column;
	padding-bottom: 8px;
	border-bottom: 1px solid;
	position: relative;
	pointer-events: none;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:first-child > a:before {
    position: absolute;
	display: block;
	content: "";
	width: 28px;
	height: 28px;
	right: 0;
	bottom: 8px;
    background: url(../image/plus.svg) no-repeat;
    transition: .35s
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li.active:first-child > a:before {
    background: url(../image/minus.svg) no-repeat;
  }
  
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:last-child > a:before {
    position: absolute;
	display: block;
	content: "";
	width: 28px;
	height: 28px;
	bottom: 8px;
    right: 0;
    background: url(../image/plus.svg) no-repeat;
    transition: .35s;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li.active:last-child > a:before {
    background: url(../image/minus.svg) no-repeat;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:nth-child(2n) > a:before {
    position: absolute;
	display: block;
	content: "";
	width: 28px;
	height: 28px;
	bottom: 8px;
    right: 0;
    background: url(../image/plus.svg) no-repeat;
    transition: .35s;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li.active:nth-child(2n) > a:before {
    background: url(../image/minus.svg) no-repeat;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > a .ja-text {
    font-size: 10px;
	letter-spacing: .16em;
	font-weight: 400;
    font-family: noto-sans-cjk-jp;
	display: inline-block;
	line-height: 10px;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > a .en-text {
    display: block;
	font-family: futura-pt;
	font-weight: 500;
	letter-spacing: .16em;
	font-size: 18px;
	line-height: 24px;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul {
    padding: 0;
	list-style: none;
	margin-top: 24px;
	display: none;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li {
    margin-top: 16px;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li a {
    color: white;
	font-family: futura-pt;
	letter-spacing: .16em;
	font-weight: 300;
  }
  
  #colophon .link-area {
    margin-top: 80px;
	display: flex;
	flex-wrap: wrap;
  }
  
  #colophon .link-area .site-map-area {
    
  }
  
  #colophon .link-area .site-map-area a, #colophon .link-area .privacy-area a {
    display: block;
	color: white;
	font-size: 13px;
	line-height: 13px;
	letter-spacing: .09em;
	font-family: futura-pt;
	font-weight: 400;
	position: relative;
  }
  
  #colophon .link-area .site-map-area a {
    padding-right: 16px; 
  }
  
  #colophon .link-area .site-map-area a:after {
    content: "/";
	position: absolute;
	right: 0;
  }
  
  #colophon .link-area .privacy-area a {
    margin-left: 8px
  }
  #colophon .copy-right-area {
    margin: 8px 0 16px 0;
	width: 100%;
  }
  
  #colophon .copy-right-area small {
    color: white;
	font-size: 13px;
	line-height: 13px;
	display: block;
	font-family: futura-pt;
	font-weight: 400;
	letter-spacing: .05em;
  }
  
  /*news-content*/
  .news-area {
    width: 100%;
	background: white;
  }
  
  .news-area .news-inner {
    padding: 40px 1em;
  }
  
  .news-title {
	margin: auto;
	width: 80px;
	position: relative;
	padding-bottom: 4px;
  }
  
  .news-title:before {
    display: block;
	content: "";
	position: absolute;
	width: 30%;
	height: 2px;
	background: #FFB219;
	bottom: 0;
	left: 20%
  }
  
  .news-title:after {
    display: block;
	content: "";
	position: absolute;
	width: 30%;
	height: 2px;
	background: #FF8A31;
	bottom: 0;
	right: 20%;
  }
  
  .news-title h2 {
    margin: 0;
	display: flex;
	flex-direction: column;
  }
  
  .news-title h2 .ja-text {
    font-size: 10px;
	font-family: noto-sans-cjk-jp;
	font-weight: 700;
	letter-spacing: .07em;
	text-align: center;
  }
  
  .news-title h2 .en-text {
    font-size: 25px;
	font-family: futura-pt;
	font-weight: 600;
	letter-spacing: 0.009em;
	text-align: center;
  }
  
  .news-content {
    margin: 32px auto 0;
	max-width: 440px;
  }
  
  .news-content ul {
    padding: 0;
	list-style: none;
    margin: 0;
  }
  
  .news-content ul li {
  
  }
  
  .news-content ul li a {
    display: block;
	padding-bottom: 8px;
	border-bottom: 1px solid #707070;
	margin-bottom: 40px;
    position: relative;
  }
  
  .news-content ul li a:before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s;
    z-index: 0;
  }
  
  .news-content ul li a:hover:before {
    transform: scaleX(1)
  }
  
  .news-content ul li a .text-area {
    display: flex;
	color: #212529;
    position: relative;
    z-index: 1;
  }
  
  .news-content ul li a .text-area time {
    font-size: 13px;
	font-family: futura-pt;
	font-weight: 500;
	letter-spacing: .05em;
  }
  
  .news-content ul li a .text-area h2 {
    margin: 0;
	font-size: 13px;
	font-family: noto-sans-cjk-jp;
	letter-spacing: .05em;
	margin-left: 24px;
	align-self: center;
	font-weight: 500;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  
  .news-button {
	max-width: 280px;
	margin: auto;
  }
  
  .news-button a {
    display: block;
	text-align: center;
	border-radius: 3px;
    background: linear-gradient(90deg, #ffb219, #dc6f4e, #db6c50);
    background-size: 600% 600%;
	line-height: 64px;
	color: white;
	font-size: 15px;
	font-family: futura-pt;
	font-weight: 600;
	animation: AnimationName 8s ease infinite;
  }
  
  @keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
  
  /*Blog-area*/
  .blog-area {
    width: 100%;
	background: #F5F5F5;
    position: relative;
  }
  
  .blog-area .blog-inner {
    padding: 0px 1em 40px;
  }
  
  .blog-title {
	margin: auto;
	width: 80px;
	position: relative;
	padding-bottom: 4px;
  }
  
  .blog-title:before {
    display: block;
	content: "";
	position: absolute;
	width: 30%;
	height: 2px;
	background: #FFB219;
	bottom: 0;
	left: 20%
  }
  
  .blog-title:after {
    display: block;
	content: "";
	position: absolute;
	width: 30%;
	height: 2px;
	background: #FF8A31;
	bottom: 0;
	right: 20%;
  }
  
  .blog-title h2 {
    margin: 0;
	display: flex;
	flex-direction: column;
  }
  
  .blog-title h2 .ja-text {
    font-size: 10px;
	font-family: noto-sans-cjk-jp;
	font-weight: 700;
	letter-spacing: .07em;
	text-align: center;
  }
  
  .blog-title h2 .en-text {
    font-size: 25px;
	font-family: futura-pt;
	font-weight: 600;
	letter-spacing: 0.009em;
	text-align: center;
  }
  
  .blog-content {
    margin: 32px auto 0;
	max-width: 100%;
  }
  
  .blog-content ul {
    padding: 0 5%;
	list-style: none;
    margin: 0;
	float: left;
	width: 50%;
  }
  
  .blog-content ul li {
  
  }
  
  .blog-content ul li a {
    display: block;
	padding-bottom: 8px;
	border-bottom: 1px solid #707070;
	margin-bottom: 40px;
    position: relative;
  }
  
  .blog-content ul li a:before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: white;
    transform: scaleX(0);
    transform-origin: left;
    transition: .35s;
    z-index: 0;
  }
  
  .blog-content ul li a:hover:before {
    transform: scaleX(1);
  }
  
  
  
  .blog-content ul li a .text-area {
    display: flex;
	color: #212529;
    position: relative;
    z-index: 1
  }
  
  .blog-content ul li a .text-area time {
    font-size: 13px;
	font-family: futura-pt;
	font-weight: 500;
	letter-spacing: .05em;
  }
  
  .blog-content ul li a .text-area h2 {
    margin: 0;
	font-size: 13px;
	font-family: noto-sans-cjk-jp;
	letter-spacing: .05em;
	margin-left: 24px;
	align-self: center;
	font-weight: 500;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  
  .blog-button {
	max-width: 280px;
	margin: auto;
  }
  
  .blog-button a {
    display: block;
	text-align: center;
	border-radius: 3px;
    background: linear-gradient(90deg, #ffb219, #dc6f4e, #db6c50);
    background-size: 600% 600%;
	line-height: 64px;
	color: white;
	font-size: 15px;
	font-family: futura-pt;
	font-weight: 600;
	animation: AnimationName 8s ease infinite;
  }
}

@media screen and (min-width: 768px) {
  
  .site-footer .site-info {
    padding: 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li {
    margin-bottom: 32px;
  }
  
  #colophon .link-area {
    margin: 80px 0 16px 0;
  }
  
  #colophon .link-area .privacy-area a {
	position: relative;
	padding-right: 16px;
	margin-right: 16px;
  }
  
  #colophon .link-area .privacy-area a:after {
    position: absolute;
	content: "/";
	right: 0
  }
  
  #colophon .copy-right-area {
    margin: 0;
	width: auto;
	position: relative;
  }
  
  
  /*news*/
  .news-area .news-inner,.blog-area .blog-inner {
 ¬† ¬†padding: 0 1em;
  }
  
  .news-title,.blog-title {
    width: 100px;
  }
  
  .news-title h2 .ja-text {
    font-size: 16px;
	font-family: noto-sans-cjk-jp;
	font-weight: 700;
	letter-spacing: .07em;
	text-align: center;
  }
  
  .news-title h2 .en-text {
    font-size: 35px;
	font-family: futura-pt;
	font-weight: 600;
	letter-spacing: 0.009em;
	text-align: center;
  }
  
  .news-content {
    margin: 64px auto 0;
  }
  
  .news-content ul li:last-child a {
    margin-bottom: 0
  }
  
  .news-content ul li a .text-area time {
    font-size: 15px;
	font-family: futura-pt;
	font-weight: 500;
	letter-spacing: .05em;
  }
  
  .news-content ul li a .text-area h2 {
    margin: 0;
	font-size: 15px;
	font-family: noto-sans-cjk-jp;
	letter-spacing: .05em;
	margin-left: 24px;
	align-self: center;
	font-weight: 500;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  
  .news-button {
	margin: 56px auto 0;
  }
  
  .blog-title h2 .ja-text {
    font-size: 16px;
	font-family: noto-sans-cjk-jp;
	font-weight: 700;
	letter-spacing: .07em;
	text-align: center;
  }
  
  .blog-title h2 .en-text {
    font-size: 35px;
	font-family: futura-pt;
	font-weight: 600;
	letter-spacing: 0.009em;
	text-align: center;
  }
  
  .blog-content {
    margin: 64px auto 0;
  }
  
  .blog-content ul li:last-child a {
    margin-bottom: 0
  }
  
  .blog-content ul li a .text-area time {
    font-size: 15px;
	font-family: futura-pt;
	font-weight: 500;
	letter-spacing: .05em;
  }
  
  .blog-content ul li a .text-area h2 {
    margin: 0;
	font-size: 15px;
	font-family: noto-sans-cjk-jp;
	letter-spacing: .05em;
	margin-left: 24px;
	align-self: center;
	font-weight: 500;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  
  .blog-button {
	margin: 56px auto 0;
  }
}

@media screen and (min-width: 992px) {
  .container {
    width: auto;
  }
}


@media screen and (min-width: 1024px) {
  
  #colophon {
  	background: #00000094;
  }

  .site-footer .site-info {
  	padding: 0;
	margin: auto;
    max-width: 1024px;
  }
  
  #colophon .footer-logo-area .square {
    width: 48px;
	height: 48px;
	display: block;
	background: white;
  }
  
  #colophon .footer-logo-area h2 {
  	font-size: 16px;
  	font-weight: 100;
  	color: white;
  }

  #colophon .footer-logo-area h2 .en-text {
  	display: inline-block;
  	font-size: 20px;
  	font-weight: 400;
  	font-family: futura-pt;
  	vertical-align: bottom;
  	letter-spacing: .1em;
	line-height: 20px;
  }

  #colophon .footer-logo-area h2 .ja-text {
  	display: block;
  	font-size: 28px;
  	font-weight: 700;
  	font-family: noto-sans-cjk-jp;
  	letter-spacing: .05em;
	line-height: 28px;
  }

  #colophon .footer-nav-area {
    margin: 48px 0 0 0
  }

  #colophon .footer-nav-area .menu-footer-menu-container > ul {
  	list-style: none;
  	padding: 0;
  	display: flex;
	justify-content: space-between;
  }

  #colophon .footer-nav-area .menu-footer-menu-container > ul > li {
    margin: 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:first-child > a:before {
    display: none
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:first-child > a:after {
    display: none;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:last-child > a:before {
    display: none;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:last-child > a:after {
    display: none
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:nth-child(2n) > a:before {
    display: none;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li:nth-child(2n) > a:after {
    display: none
  }
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > a {
    border: none;
	pointer-events:visible;
	transition: .35s;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > a:hover {
    opacity: .7
  }
  
  
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul {
    display: block;
	margin: 24px 0 0 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li {
    margin: 0;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li:not(:first-child) {
    margin-top: 16px;
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li > a {
    transition: .35s
  }
  
  #colophon .footer-nav-area .menu-footer-menu-container > ul > li > ul > li > a:hover {
    opacity: .7
  }
  
  
  #colophon .link-area {
    width: auto;
	margin: 80px 0 16px auto;
    justify-content: flex-end;
  }
  
  #colophon .link-area a {
    transition: .35s;
  }
  
  #colophon .link-area a:hover {
    opacity: .7;
  }
  
  /*info-area*/
  .info-area {
    display: flex;
  }
  
}

