@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP");
@import url("https://fonts.googleapis.com/css?family=Montserrat");

* {
padding:0;
margin:0;
outline:none;
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
-webkit-appearance:none;
border-radius:0;
}

// スマホのスクロールをスムーズに
html {
-webkit-overflow-scrolling:touch;
}

html,body {
width:100%;
height:100%;
color:#303030;
font-family:"Noto Sans JP";
font-size:16px;
letter-spacing:1px;
line-height:1.5em;
padding:0;
margin:0;
}

a {
text-decoration:none;
transition:all 0.1s linear;
}

ul {
list-style:none;
padding:0;
}

h1,h2,h3,h4,h5,h6 {
font-weight:bold;
line-height:1.5rem;
}

h1 {
font-size:2.0rem;
line-height:2.0rem;
}

h2 {
font-size:1.5rem;
line-height:2.0rem;
}

h3 {
font-size:1.25rem;
line-height:1.5rem;
}

h4,h5,h6 {
font-size:1.0rem;
line-height:1.5rem;
}

table	 {
border-collapse:collapse;
}

td,input	 {
font-family:"Noto Sans JP";
}

button {
background:transparent;
border:0;
}

button:hover {
cursor:pointer;
}

// Font Awesome 
@mixin ICON {
font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";
font-weight:900;
}

// Noto Sans JP
@mixin SANS {
font-family:"Noto Sans JP";
font-weight:400;
}

// Noto Serif JP
@mixin SERIF {
font-family:"Noto Serif JP";
font-weight:400;
}

// Montserrat
@mixin MON {
font-family:"Montserrat";
}

// 全体のデザイン
$white:#ffffff;
$gray:#999999;
$dark-gray:#303030;
$light-gray:#cccccc;
$beige:#c9a486;
$soft-beige:#f8f7f4;
$red:#eb3b5a;
$orange:#fa8231;
$yellow:#f7b731;
$green:#20bf6b;
$blue:#3867d6;
$purple:#8854d0;
$black:#333333;
$accent :#45a3bf;



/* 全体の読み込みをふわっと */
body {
-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
// ここから

.header-text {
max-width:50rem;
padding:0 1rem;
margin:6rem auto;
font-size: 1rem;
line-height: 2.4rem;
letter-spacing: 2px;
}

/************************* 看板 ***************************/

.kanban {
width:100%;
height: 100%;
margin:0 0 8rem 0;
text-align: center;
img {
padding:0;
width:100%;
z-index: 1;
}
div.pc{
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
img.logo{
width:100%;
max-width: 966px;
height: auto;
position:absolute;
top:42%;
left:8%;
z-index: 999999999;
}
img{
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}}
div.sp{display: none;}
}

@media screen and (max-width:30rem) {
.kanban {
margin:0 0 2rem 0;
height: auto;
img {
margin:0 auto;
padding:0;
}
div.pc{
display: none;
}
div.sp{
width: 100%;
height: 460px;
margin: 0 auto;
display: block;
overflow: hidden;
position: relative;
img{
top: 0;
left: 0;
position: absolute;}
img.logo{
width:60%;
top:42%;
left:2%;
}
}
}
}



/* LOGO */
@keyframes fadein_logo {
0% {
opacity: 0;/* 透明 */
}
100% {
opacity: 1;/* 不透明 */
}
}
.fadein_logo {
opacity: 0;/* ここを追加 */
animation-duration: 1s;/* アニメーション時間 */
animation-delay : 0.5s;/* 変化開始の時間 */
animation-name: fadein_logo;/* アニメーション名 */
animation-iteration-count: 1;/* アニメーションの繰り返し（無限）*/
animation-fill-mode: forwards; /*これで値を保持*/
}




@media screen and (max-width:50rem) {
.header-text {
font-size:0.9rem;
max-width:40rem;
padding:0 2rem;
margin:3rem auto;
line-height: 1.6rem;
}
}

.content_container {
width:100%;
padding:8rem 0;
background-color: $soft-beige;
}
@media screen and (max-width:50rem) {
.content_container {
padding:4rem 0;
}
}

h2 {
font-family: "Montserrat";
font-weight:bold;
text-align:center;
font-size:2rem;
padding:0 0 2rem 0;
}
@media screen and (max-width:50rem) {
h2 {
font-size:1.6rem;
}
}
.content_inner {
max-width:80rem;
margin:0 auto;
}

.styling {
width:100%;
display:flex;
word-wrap:wrap;

&:nth-child(even) {
flex-direction:row-reverse;
}
}

.styling_right{
padding-top:8rem;
clear: both;
}

@media screen and (max-width:50rem) {
.styling {
width:100%;
display:block;
word-wrap:wrap;
}
}

.styling_image {
padding:0 1rem;
width:calc(100% - 2rem);

img {
width:100%;
object-fit:cover;
}
}

.styling_layout {
width:50%;
margin:-10rem 0 0 0;
span{
width:49.5%;
float:left;
img{
object-fit: cover;
}
}
}
.styling_layout span:first-child {
padding-right:1%;
}

@media screen and (max-width:50rem) {
.styling_image {
padding:0;
width:100%;
}
}

@media screen and (max-width:50rem) {
.styling_layout {
margin: 0 1rem;
width: calc(100% - 2rem);
span{
width:49.5%;
}
}
}

.item-link {
margin:0 0 4rem 0;
text-align:center;

a {
font-weight:bold;
background:$beige;
border-radius:1.5rem;
color:$white;
display:inline-block;
padding:0 3rem;
line-height:3rem;
height:3rem;
transition:all 0.1s linear;

&:before {
@include ICON;
content:"\f0da";
margin:0 0.5rem 0 0;
}

&:hover {
background:$soft-beige;
color:$beige;
border: 1px solid $beige;
}
}
}
.styling_article {
padding:2rem 1rem;
width:calc(50% - 2rem);


p {
margin:0 0 2rem 0;
span{
font-weight:200;
}
}
}

@media screen and (max-width:50rem) {
.styling_article {
padding:0rem 2rem;
width:calc(100% - 4rem);

p {
margin:2rem 0 2rem 0;
font-size:0.8rem;
}
}
}

.styling_list {


a {
font-size:0.9rem;
color:$dark-gray;
transition:all 0.1s linear;

&:hover {
color:$beige;
}
}
}
@media screen and (max-width:50rem) {
.styling_list {
a {   font-size: 0.8rem;
line-height: 0.8rem;
}
}
}



h3 {
font-family: "Montserrat";
font-weight:bold;
text-align:center;
padding:8rem 0 2rem 0;
}
@media screen and (max-width:50rem) {
h3 {
font-size:1rem;
}
}
.relation_items {
display:flex;
flex-wrap:wrap;
max-width:80rem;
justify-content:center;
margin:0 0 4rem 0;

li {
margin:0.5rem;

img {
max-width:15rem;
}
}
}

@media screen and (max-width:50rem) {
.relation_items {
li {
img {
max-width:10rem;
}
}
}
}

.new_image{position:relative;}
.new_container {
margin:0 !important;
line-height:1em !important;
text-align:center;
position:absolute;
top:-10px;
left:-10px;
background:#E93F3F;
width:40px;
height:40px;
color:#ffffff !important;
border-radius:100%;
font-weight:bold;
transform:rotate(-10deg);
z-index:9900;

.new_wrapper {
color:#ffffff !important;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

.new_title {
font-family: YuGothicM;
font-weight: normal;
src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
local('Yu Gothic Medium'), /* Chrome用 */
local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
font-size:11px;
display:block;
font-weight:bold !important;
letter-spacing:0 !important;
}

.new_upto {
font-size:21px;
line-height:1em;
font-weight:bold !important;
letter-spacing:0 !important;
}

.new_jp  {
font-size:11px;
line-height:1em;
font-weight:bold !important;
letter-spacing:0 !important;
}
}

.inner {
width: 980px;
margin: 0 auto;
}
.inner:after {
content: "";
clear: both;
display: block;
}

/* header */
#top-head {
top: -100px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 30px 0 0;
line-height: 1;
z-index: 999;
}
#top-head a,
#top-head {
font-family: "Montserrat";
color: $black;
text-decoration: none;
}
#top-head .inner {
position: relative;
display: none;
}
#top-head .logo {
float: left;
font-size: 1.1rem;
padding: 10px 0 0 0;
}
#global-nav ul {
list-style: none;
position: absolute;
right: 0;
bottom: 0;
font-size: 14px;
}
#global-nav ul li {
float: left;
font-weight: 900;
}
#global-nav ul li a {
padding: 0 20px 10px 20px;
margin-top: -10px;
}

/* Fixed */
#top-head.fixed {
margin-top: 0;
top: 0;
position: fixed;
padding-top: 0;
height: 55px;
background: #fff;
background: rgba(255,255,255,.7);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .inner{
display:block;}
#top-head.fixed .logo {
font-size: 1.1rem;
}
#top-head.fixed #global-nav ul li a {
color: $black;
font-size:1rem;
padding: -10px 20px 0 20px;
}

/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 24px;
height: 22px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #000;
border-radius: 2px;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
top: 0;
}
#nav-toggle span:nth-child(2) {
top: 8px;
}
#nav-toggle span:nth-child(3) {
top: 16px;
}
@media screen and (max-width: 640px) {
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 48px;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 13px;
top: 0px;
color: #333;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -510px;
background: #333;
width: 100%;
text-align: center;
padding: 10px 0 0 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 0.4rem;
}
#global-nav ul li {
float: none;
position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 18px 0;
}
#nav-toggle {
display: block;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}

footer {
background:#4B4B4B;
color:#cccccc;
padding:80px 0;
text-align:center;
}
footer a {
color:#cccccc;
border:2px solid #cccccc;
padding:10px 50px;
text-align:center;
margin:0 0 20px 0;
display:inline-block;
border-radius:2px;
font-weight:500;
letter-spacing:2px;
}
footer a:hover {
color:#666666;
border:2px solid #666666;
}
footer a:before {
font-family:FontAwesome;
content:"\f077";
margin:0 10px 0 0;
}
footer .copyright {
letter-spacing:1px;
font-weight:200;
}
@media screen and (max-width:50rem) {
footer .copyright {
font-size: 0.6rem;
}
}