@charset "utf-8";

html * {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: #ffffff;
/*	font-family: sans-serif;*/
	font-family: "Rounded Mplus 1c";
	font-size: 16px;
}

hr {
    margin-top: 150px;
}

small {
    font-size: 0.8rem;
}


#loader-bg {
    background-color: #332d2b;
}

#loading {
     text-align: center;
    padding-top: 30vh;
}


/* レイアウト部分 */
.sidebar {
	position: fixed;
	width: 340px;
	height: 100%;
	padding: 30px 20px 50px 20px;
	background: #000000;
}
img.float_left {
    width: 50px;
	float: left;
	margin: 0 10px 10px 0;
}


.modosu a:visited {
    color: blue;
}

.float_clear {
    clear: both;
}

/* サイドバー */
.header-logo {
	margin: 0;
	background-image: url(../img/logo3.png);
	background-repeat: no-repeat;
    background-size: 51px 50px;
    text-indent: -9999px;
}
nav {
	margin: 0;
	padding: 20px 0 0 0;
}
.globalnav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.globalnav li {
	margin: 0 0 10px 0;
}
.globalnav li a {
	display: block;
	padding: 10px 20px;
	border-bottom: 2px solid #ffffff;
	text-decoration: none;
	color: #ffffff;
}
a.company {
    line-height: 50px;
	font-size: 1.2rem;
    color: white;
	text-decoration: none;
}
a.company:hover {
	color: orange;
}


.globalnav li a:hover,
.globalnav li a.current {
	border-bottom: 2px solid orange;
	color: orange;
}

.upnew {
    /* color: #c12c3f; */
    color: red;
    font-size: small;
    font-weight: bold;
    /* background-color: #c12c3f; */
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* メインコンテンツ */
.keyvisual {
	font-size: 0;
}
.keyvisual img {
	width: 100%;
	border-radius: 10px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: pointer;
}

.keyvisual img:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
    -ms-filter: "alpha(opacity=85)";

}

.textright {
    text-align: right;
    margin: 0;
    padding: 0;
}

.example {/*親div*/
  position: relative;/*相対配置*/
  }

.example .ccopy {
  font-family: sans-serif; 
  position: absolute;
  color: white; /* 文字色 */
  position: absolute;
  font-weight:bold;
	color: whitesmoke;
	text-shadow: 
		0 0 0.10em orange,
		0 0 0.15em orange,
		0 0 0.80em orange,
		0 0 1.00em orange;
}

.example .link01 {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*以下装飾*/
  margin:0;/*余計な隙間を除く*/
  font-size: 25px;/*文字サイズ*/
  border: solid lightgray 2px; /*線で囲う*/
  padding: 2px 6px;/*文字と線の間の余白*/
  color: lightgray;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
  }

.example .link01:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
    color: orange;
    border-color: orange;
  }


.example .link02 {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 83%;
  left: 70%;
  padding: 5px 15px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  background-color: orange;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  }

.example .link03 {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 83%;
  left: 5%;
  padding: 5px 15px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  background-color: #c12c3f;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  }



.maincopy {
	margin: -10px 0 0 0;
	padding: 0;
/*	text-align: center;*/
	font-size: 1.2rem;
}

.clickorange {
    color: orange;
}

.news {
	margin: 0;
	padding: 0 0 40px 0;
}
.news h2 {
	margin: 0 0 20px 0;
	font-size: 1.2rem;
}
.news-contents {
	margin: 0;
	padding: 0;
	list-style: none;
}
.news-contents li {
	overflow: hidden;
	margin: 0 0 10px 0;
	padding: 10px;
	border: 1px solid #dadada;
}
.news-contents li img {
	float: left;
	margin-right: 10px;
}
.news-contents li p {
	margin: 0;
}
/* フッター */
footer {
	padding: 0 0 0 0;
/*	border-top: 1px solid red;*/
}
.copyright {
	margin: 0;
	font-size: 0.8rem;
	text-align: right;
}

.copyright a:visited {
    color: white;
}

.fbfooter {
    margin-left: 20px;
    font-size: 1.1rem;
    color: white;
}

.tshirt {
    margin-left: 10px;
    color: white;
}


.fbcolor {
    color: blue;
}

.marleft {
    margin-left: 30px;
}

.mailback {
    padding: 5px 15px;
    color: white;
    background-color: orange;
    margin-top: 10px;
    font-weight: bold;
    border-radius: 5px;
    
}

.fbcenter {
    text-align: center;
    margin: 70px 0;
}

.center_iframe {
/*    display: block;*/
    margin: 0 auto;
    width: 300px;
}

.underarrow ::after {
    margin:0 0 0 10px;
    font-family: "FontAwesome";
/*    content:'\f358';*/
    color: black;
}

/*
.footer-container .mobile ul li {
    letter-spacing: 6px;
}

.footer-container .mobile ul .jigyoafter {
    letter-spacing: 1px;
}

.footer-container .mobile ul .rinenafter {
    letter-spacing: 1px;
}
*/




.shuyotori figure {
    margin-top: 30px; 
    margin-bottom: 30px; 
    margin-left: 40px; 
    margin-right: 40px; 
}


/*マップの設定*/
.ggmap {
    width: 100%;
    height: 50vh;
}
/*マップのフレーム*/
.ggmap iframe {
    width: 100%;
    height: 50vh;
    border-style: none;     /*外枠をなし*/
}
/*グーグルマップ　終わり*/
.adress {
	margin: 0;
	padding: 3px 0;
	text-align: center;
}

.linkbtn {
	padding: 5px 5px;    
	font-size: 1.1rem;
	border-radius: 10px;
/*    width: 65%;*/
    margin: 30px auto;
}

.linkbtn p {
    margin: 0;
	text-align: center;
}

.linkbtn a {
    color: white;
    text-decoration: none;
}

.linkbtn a:hover {
    color: orange;
}

.linkbtn:hover {
    background-color: black;
}

.linkbtn p::before {
    font-family: "FontAwesome";
    content: "\f0da";
    margin-right: 10px;
    
}

.footer-container {
    background-color: black;
    color: white;
    padding: 20px;
    margin: 0
}

.fb iframe {
    width: 100%;
    height: 70vh;
}

.fb {
    margin-right: 20px;
}

.entry-title {
    font-weight: bold;
    letter-spacing: 5px;
    font-size: 1.5rem;
}

.entry-title:before{
    margin:0 10px 0 0;
    content:" ";
    display:inline-block;
    width:36px;
    height:44px;
    background:url(../img/SPENCERlogo1.jpg);    
    background-size:contain;
    vertical-align:middle;
    background-repeat: no-repeat;    
}

.globalnav .coloredit a {
    color: orange;
    border-bottom-color: orange;
}

.jigyoafter a::after {
    content: " ‐ 何をしている会社？";
    font-size: 0.8rem;
}

.spright  {
    margin-right: 25px;
}

.spright2  {
    margin-right: 20px;
}


.rinenafter a::after {
    content: " ‐ 創業者の想い";
    font-size: 0.8rem;
}


.coloredit a::after {
    margin:0 0 0 10px;
    font-family: "FontAwesome";
    content:'\f101';
/*    font-size: 1.1rem;*/
/*
    display:inline-block;
    width:20px;
    height:20px;
    background:url(../img/SPENCERlogo1.jpg);    
    background-size:contain;
    vertical-align:middle;
    background-repeat: no-repeat;    
*/
}

.title:before { 
    content: url(../img/SPENCERlogo1.jpg);
    background-size 10px;
    background-repeat: no-repeat;    
}

.accesscompany {
    font-size: 1.8rem;
}

.akairo {
    color: #c12c3f;
}


.gaiyou img {
	width: 50%;
	border-radius: 10px;
}
.bkorange    {background-color: orange;    color: white; }
.shopbox {
    padding: 10px 0 10px 10px ;
    border-bottom: solid 1px white;
/*	border-radius: 10px;*/
}

.smallmoji {
    font-size: 1.1rem;
}

.letsp {
    letter-spacing: 8px;
}

figure {
    display: inline-block;   /* インラインブロック化 */
    margin: 0px 3px 7px 0px; /* 外側に余白を追加(※右に3px・下に7px) */
/*    background-color: #ccc;   背景色 */
}
/* ▼画像に対する装飾 */
figure img {
    display: block;          /* 余計な余白が出ないようにする */
    margin: 0px 0px 0px 0px; /* 下側にだけ3pxの余白を追加 */
}

.vacheron {
    background-color: black;
    padding: 5px;
}

.furla {
    padding: 4px 6px;
}

.artistic {
    padding: 1px 7px;    
}

.bkblack {
    background-color: black;
}

.bkgray {
    background-color: darkgray;
}

figure img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
}
/* ▼キャプションに対する装飾 */
figcaption {
    font-size: 0.7em;        /* 文字サイズを90%に */
/*    text-align: center;       中身をセンタリング */
    width: 208px;
    padding-top: 10px;
    background-color: white;
}

.torihiki {
    background-color: white;
}

.rinen ,.rinen2{
    border:1px solid #FFB83F;
    margin: 30px auto;
    background-color: #FFF5E5;
/*    background-image: url(../img/rinen2.png);*/
    background-repeat: no-repeat;    
}

/* 冒頭でimport */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.rinen2 p {
    padding-left: 20px;
    padding-right: 20px;
}

.rinen p {
    text-align: center;
    font-family: serif,"ＭＳ 明朝",'Noto Sans Japanese';
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

.rinenimg {
    text-align: center;
}

.leftborder {
    border-left-color: orange;
    border-left-style: solid;
    border-left-width: 5px;
    padding-left: 10px;
    margin-left: 5px;
}

.leftborder2 {
    background-color: antiquewhite;
    border-left-color: orange;
    border-left-style: solid;
    border-left-width: 5px;
    border-bottom-color: orange;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 5px;
    font-size: 1.2rem;
}

.setubi_left img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
}

.gigyonaiyo {
    margin: 0;
    padding-left: 25px;
}

.setubiul  {
    margin-left: 125px;
    padding-left: 25px;

}

.gigyonaiyo a:visited {
    color: blue;
}

.mojigray {
    color: darkgray;
/*    text-decoration: underline;*/
}

.gigyonaiyo .mojigray::after {
    margin:0 0 0 10px;
    font-family: "FontAwesome";
    content:'\f14a';
    color: black;
    text-decoration: none;
}

.kaisha a:visited,.fbcenter a:visited {
    color: blue;
}

.marleft a:visited {
    color: blue;
}

a:hover.mailback {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
}



.link02:hover,.link03:hover {
    color: black;
}

.blue {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.saiyogamen {
  background-image: url(../img/SPENCER_Tshirt.jpg),url(../img/SPENCER_fire.jpg);
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
    
}


.mobst {
    color: white;
    text-decoration: none;
    background-color: orange;
    padding: 0px 3px;
    border-radius: 5px;
    margin-left: 5px;
    float: right;
    margin-right: 10px;
    margin-top: -10px;
    border: 1px double white;
}

.mobst:hover,.mobst2:hover {
    opacity: 0.50;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
    
}

.mobst2 {
    color: white;
    text-decoration: none;
    background-color: #c12c3f;
    padding: 0px 9px;
    border-radius: 5px;
    margin-left: 5px;
    float: right;
    margin-right: 10px;
    margin-top: -25px;
    border: 1px double white;
}


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

.example .ccopy {
    font-size: 30px; /* 文字の大きさ */
    left: 18%;
    top: 25%;
} 

.gigyonaiyo li {
    line-height: 25px;
}    
    
.setubi_left img {
	margin: 0 10px 10px 0;
}
    
    .link02,.link03 {
        display: none;
    }
    
    .gyokan {
        line-height: 0.5;
    }
    
    .mobst {
        color: white;
        text-decoration: none;
        background-color: orange;
        padding: 0px 3px;
        border-radius: 5px;
        margin-left: 5px;
        float: right;
        margin-right: 10px;
        margin-top: 10px;
        border: 1px double white;
    }

    .mobst2 {
        color: white;
        text-decoration: none;
        background-color: #c12c3f;
        padding: 0px 9px;
        border-radius: 5px;
        margin-left: 5px;
        float: right;
        margin-right: 10px;
        margin-top: -10px;
        border: 1px double white;
    }

    
    .mobile {
        background-color: black;
    }    
    .mobile ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .mobile nav {
        padding-top: 5px;
    }
    
    .sidebar {
        display: none;
    }

    .maincontents {
        padding: 20px;
    }

    a.company {
        line-height: 50px;
        font-size: 0.55rem;
        color: white;
        text-decoration: none;
    }
    a.company:hover {
        color: orange;
    }
    
    .globalnav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .globalnav li {
        margin: 0 0 2px 0;
    }
    .globalnav li::before {
        content: "   "
    }

    
    .globalnav li a {
        font-size: 0.9rem;
        display: block;
        padding: 2px 10px;
/*        border-bottom: 2px solid black;*/
        text-decoration: none;
        color: white;
    }
    
    .globalnav li a:hover {
/*        border-bottom: 2px solid orange;*/
        color: orange;
    }

/*
    .globalnav li a.current {
        border-bottom: 2px solid orange;
        color: orange;
    }
*/
    
.linkbtn {
    width: 85%;
}

.pc-only {
     display: none;
    }    
    
    
}

/* ###############################*/
/*                                */
/*  1024px 以上（ＰＣ用）　始まり　↓↓↓ */  
/*                                */
/* ###############################*/

@media screen and (min-width:900px) {
/*                     */
/* 各画面共通　始まり ↓↓↓ */
/*                     */

.example .ccopy {
    font-size: 56px; /* 文字の大きさ */
    left: 25%;
  top: 10%;
}    

.setubi_left img {
	float: left;
	margin: 0 10px 10px 0;
}

    
    
/*ＰＣ用は、グループ化し回り込みを解除する設定    */
.boxA:after{ content: ""; display: block; clear: both; }
/*５％のボックス*/
.box05 { float: left; width: 5%; }   
/*１０％のボックス*/
.box10 { float: left; width: 10%; }
/*１１％のボックス*/
.box11 { float: left; width: 11%; }
/*１２％のボックス*/
.box12 { float: left; width: 12%; }
/*約１４％（1/7）のボックス*/
.box14 { float: left; width: 14.2857%; }
/*１５％のボックス*/
.box15 { float: left; width: 15%; }
/*約１８％のボックス*/
.box18 { float: left; width: 18%; }
/*２０％のボックス*/
.box20 { float: left; width: 20%; }
/*２２％のボックス*/
.box22 { float: left; width: 22%; }
/*２５％のボックス*/
.box25 { float: left; width: 25%; }
/*３０％のボックス*/
.box30 { float: left; width: 30%; }
/*約３３％（1/3）のボックス*/
.box33 { float: left; width: 33.3333%; }
/*３５％のボックス*/
.box35 { float: left; width: 35%; }
/*４０％のボックス*/
.box40 { float: left; width: 40%; }
/*４５％のボックス*/
.box45 { float: left; width: 45%; }
/*５０％のボックス*/
.box50 { float: left; width: 50%; }
/*６０％のボックス*/
.box60 { float: left; width: 60%; }
/*６５％のボックス*/
.box65 { float: left; width: 65%; }
/*７０％のボックス*/
.box70 { float: left; width: 70%; }    
/*７５％のボックス*/
.box75 { float: left; width: 75%; }
/*１００％のボックス*/
.box100 { float: left; width: 100%; }


.maincontents {
	margin-left: 340px;
	padding: 20px;
}
    
    
.mobile {
    display: none;
}    

.mobile-only {
    display: none;
}    

    
    
a.company {
    line-height: 50px;
	font-size: 1.0rem;
    color: white;
	text-decoration: none;
}
a.company:hover {
	color: orange;
}
    
.linkbtn {
    width: 65%;
}
    
.sumaho {
    width: 700px;
    height: 394px;
}    

.sdgsimg,.sdgsimg2 {
    text-align: center;
}


.sdgsimg img {
    width: 50%;
}

.sdgsimg2 img {
    width: 10%;
}

.text1 {
	text-align: left;
	display: inline-block;
}

.sample {
	margin: 16px auto;
	text-align: center;
	display: block;
}

}

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

     
    .sumaho {
        width: 90%;
        height: 315px;
    }
    
    .sdgsimg,.sdgsimg2 {
        text-align: center;
    }

    .sdgsimg2 img {
        width: 15%;
    }
    
}