@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Train+One&display=swap');

/* common */
html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, dl, dt, dd, a, ul, ol {
  border: 0;
}

body {
	color: #000;
	background: #fff;
	line-height: 2.1;
    letter-spacing: 0.12em;
    text-align: justify;
	font-feature-settings: "palt" !important; /* 文字詰 */
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
}

a {
  color: #000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.pc, img.pc {
  display: block;
}
.sp, img.sp {
  display: none;
}
img{
	border: none;
	vertical-align: bottom;
}
.brcl {
  clear:both;
}
.fontgara {
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.fontgo {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

#wrapper {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 300px 0 0 0;
}
.normal{
    width: 100%;
    margin: 0 auto;
}

/* sp-common */
@media screen and (max-width: 768px) {
    body {
    }
    img {
      width: 100%;
      height: auto;
    }
    .pc, img.pc {
      display: none;
    }

    .sp, img.sp {
      display: block;
    }
    #wrapper {
        padding: 30vw 0 0 0;
    }
}



/*  */
/* toppage */
#maintop {
	display: block;
	width: 960px;
	margin: 0 auto;
    padding: 0 0 0 30px;
}
.index_inner {
    width: 930px;
    height: 580px;
    overflow-x: hidden;
    overflow-y: scroll;
	margin: 0 auto;
    padding: 0;
}
.index_inner::-webkit-scrollbar {
    width: 1px !important; /* 縦スクロールバーの幅 */
    height: 12px; /* 横スクロールバーの高さ */
}
.index_inner::-webkit-scrollbar-track {/* スクロールバーの軌道（背景） */
    background: #fff;
}
.index_inner::-webkit-scrollbar-thumb {/* スクロールバーのつまみ（バー本体） */
    background: #aaa;
}
.innerbox{
    position: relative;
    width: 280px;
	margin: 0 24px 24px 0;
    height: 176px;
    background: #ddd;
    text-align: center;
    float: left;
}
.innerbox img {
  width: auto;
    height: 100%;
}
.innerboxtext{
    position: absolute;
    width: 260px;
	bottom: 10px;
    left: 10px;
    line-height: 1.5;
    text-align: left !important;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.innerboxtextday{}
.innerboxtextname{}

.toptopixbox{
    width: 920px;
    margin: 80px auto 0 auto;
    line-height: 1.8;
    text-align: left !important;
}
.toptopixboxday{
    width: 100%;
    margin: 15px 0 0 0;
    font-size: 16px;
}
.toptopixboxtxt{
    width: 100%;
    margin: 0;
    font-size: 16px;
}


/* sp-toppage */
@media screen and (max-width: 768px) {
    #maintop {
        display: block;
        width: 100%;
        padding: 0 0 0 0;
    }
    .index_inner {
        width: 92%;
        height: auto;
        overflow-x: visible;
        overflow-y: visible;
        margin: 5% auto -15% auto;
        padding: 0;
    }
    .innerbox{
        position: relative;
        width: 47%;
        margin: 0 1.5% 3% 1.5%;
        height: 27.1875vw;
        float: left;
    }
    .innerbox img{
        width: auto;
        height: 100%;
    }
    .innerboxtext{
        position: absolute;
        width: 94%;
        bottom: 5%;
        left: 3%;
        line-height: 1.4;
        letter-spacing: 0;
        color: #fff;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);
    }
    .innerboxtextday{}
    .innerboxtextname{margin: 3px 0 0 0;}
    .toptopixbox{
        width: 88%;
        margin: 24% auto 0 auto;
    }
    .toptopixbox a{
        text-decoration: underline;
    }
    .toptopixboxday{
        width: 100%;
        margin: 5% 0 0 0;
        font-size: 3.6vw;
    }
    .toptopixboxtxt{
        width: 100%;
        margin: 0;
        font-size: 3.6vw;
    }
}



/*  */
/* about */
#mainother {
	display: block;
	width: 960px;
	margin: 0 auto;
    padding: 0;
}
h1.h1about{
    width: 100%;
    margin: 0 auto;
    font-size: 25px;
    text-align: center;
    font-weight: normal;
}
h2.h2about{
    width: 100%;
    margin: 0 auto;
    font-size: 21px;
    text-align: center;
    font-weight: normal;
}
.aboutbox{
    width: 660px;
    margin: 2px auto;
    font-size: 16px;
    line-height: 2;
}
.aboutbox1{
    width: 140px;
    float: left;
}
.aboutbox2{
    width: 510px;
    margin: 0 0 0 10px;
    float: left;
}

/* sp-about */
@media screen and (max-width: 768px) {
    #mainother {
        display: block;
        width: 100%;
        padding: 0 0 0 0;
    }
    h1.h1about{
        width: 86%;
        font-size: 6vw;
    }
    h2.h2about{
        width: 86%;
        font-size: 5.3vw;
    }
    .aboutbox{
        width: 86%;
        margin: 0 auto;
        line-height: 1.8;
    }
    .aboutbox1{
        width: 100%;
        margin: 0;
        font-size: 3.8vw;
        float: none;
    }
    .aboutbox2{
        width: 100%;
        margin: 5px 0 0 0;
        font-size: 3.5vw;
        float: none;
    }
}



/*  */
/* idea */
.ideaboxja{
    width: 660px;
    margin: 0 auto;
    font-size: 16px;
    letter-spacing: 0.2em;
}
.ideaboxen{
    width: 660px;
    margin: 0 auto;
    font-size: 15px;
    letter-spacing: 0.05em;
}
.ideaboxname{
    width: 200px;
    margin: 0 0 0 460px;
}
.ideaboxname img{
    width: 100%;
}

/* sp-idea */
@media screen and (max-width: 768px) {
    .ideaboxja{
        width: 86%;
        margin: 0 auto;
        font-size: 3.4vw;
        line-height: 2.8;
        letter-spacing: 0.1em;
    }
    .ideaboxen{
        width: 86%;
        margin: 0 auto;
        font-size: 3.0vw;
        line-height: 2.4;
    }
    .ideaboxname{
        width: 40%;
        margin: 0 auto 0 60%;
        padding: 10% 0 0 0;
    }
    .ideaboxname img{
        width: 100%;
    }
}



/*  */
/* vision */
h2.h2vision{
    width: 660px;
    margin: 0 auto;
    font-size: 21px;
    font-weight: normal;
}
.visionbox{
    width: 660px;
    margin: 0 auto;
    font-size: 16px;
    letter-spacing: 0.2em;
}
/* sp-vision */
@media screen and (max-width: 768px) {
    h2.h2vision{
        width: 86%;
        font-size: 4.2vw;
    }
    .visionbox{
        width: 86%;
        font-size: 3.4vw;
        line-height: 2.4;
        letter-spacing: 0.1em;
    }
}



/*  */
/* method */
.methodbox{
    width: 660px;
    margin: 0 auto;
}
.methodbox1{
    width: 325px;
    margin: 5px 0;
    float: left;
}
.methodbox2{
    width: 325px;
    margin: 5px 0 0 10px;
    float: left;
}
.methodbox1 img, .methodbox2 img{
    width: 100%;
}

/* sp-method */
@media screen and (max-width: 768px) {
    .methodbox{
        width: 98%;
        margin: 0 auto;
    }
    .methodbox1{
        width: 49.5%;
        margin: 0 0 1% 0;
        float: left;
    }
    .methodbox2{
        width: 49.5%;
        margin: 0 0 1% 1%;
        float: left;
    }
}




/*  */
/* tales */
h2.h2tales{
    width: 100%;
    margin: 0 auto;
    font-size: 25px;
    text-align: center;
    font-weight: normal;
}
.talesboxen{
    width: 660px;
    margin: 0 auto;
    font-size: 13px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.talesboxja{
    width: 660px;
    margin: 0 auto;
    font-size: 16px;
    letter-spacing: 0.2em;
}
/* sp-tales */
@media screen and (max-width: 768px) {
    h2.h2tales{
        width: 86%;
        font-size: 5.3vw;
    }
    .talesboxen{
        width: 86%;
        margin: 0 auto;
        font-size: 3.0vw;
        line-height: 2.4;
}
    .talesboxja{
        width: 86%;
        margin: 0 auto;
        font-size: 3.4vw;
        line-height: 2.8;
        letter-spacing: 0.1em;
    }
}




/*  */
/* projects */
.mainprojects {
    width: 912px;
	margin: 0 auto;
}

.projectsbggray {
    background: #222;    
}
.projectsbox1 {
    width: 890px;
    margin: 0 auto;
    text-align: center;
    color: #eee;
    font-size: 16px;
    letter-spacing: 0.05em;
}
.projectsbox1txt {
    width: 890px;
    margin: 10px auto 0 auto;
    color: #eee;
    font-size: 15px;
    letter-spacing: 0.05em;
}
.projectsbox2 {
    width: 890px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 17px;
}
 .projectsbox2 a {
    color: #fff;
    padding: 0 0 4px 0;
  text-decoration: none;
}
 .projectsbox2 a:hover {
    border-bottom: 1px #fff solid;
}

/* sp-projects */
@media screen and (max-width: 768px) {
    .mainprojects {
        width: 92%;
        margin: 5% auto -15% auto;
    }

    .projectsbox1 {
        width: 86%;
        font-size: 4.1vw;
        line-height: 2;
    }
    .projectsbox1txt {
        width: 86%;
        margin: 10px auto 0 auto;
        color: #eee;
        font-size: 3.6vw;
        letter-spacing: 0.05em;
        line-height: 1.9;
    }
    .projectsbox2 {
        width: 86%;
        font-size: 4.1vw;
    }
}




/* header */
header#header {
    display: block;
	position:fixed;
	top:0;
    width: 100%;
	height: 245px;
	z-index: 5;
    background: #fff;
    line-height: 1.6;
}
header#header .headbox {
  width: 960px;
	margin: 0 auto;
}
header#header .logo {
    width: 332px;
	margin: 70px auto 0 auto;
}
header#header .headmenu {
    width: 690px;
	text-align: center;
	margin: 44px auto 0 auto;
}
header#header a {
  color: #000;
    padding: 0 0 4px 0;
  text-decoration: none;
}
header#header .headmenu a:hover {
    border-bottom: 1px #000 solid;
}


/* sp-header */
@media screen and (max-width: 768px) {
    header#header {
        height: 26vw;
      /* border-bottom: solid 1px #000; */
    }
    header#header .headbox {
      width: 100%;
        margin: 0 auto;
        padding: 8vw 0 0 0;
    }
    header#header .headmenu {
        display: none;
    }
    header#header .logo {
      width: 45vw;
        margin: 0% auto 0 auto;
    }
}



/* menu */
.navsp{
  display: none;
}

/* sp-menu */
@media screen and (max-width: 768px) {
    .navsp{
        display: none;
        width: 100%;
        position: fixed;
        top: 0px;
        text-align: center;
        left: 0;
        margin-left: 0;
        z-index: 99;
        background-color: rgba(200, 200, 200, 0.95);
    }
    .navsp a {
      color: #000;
      text-decoration: none;
    }
    .navsp ul li {
      font-size: 5vw;
      padding: 0.4em 0;
    }
    .navsp ul .nav1{
      padding: 1.4em 0 0.2em 0;
      border-bottom: solid 1px #ddd;
    }
    .navsp ul .nav2{
      border-bottom: solid 1px #ddd;
    }
    .navsp ul .nav3{
      border-bottom: solid 1px #ddd;
      padding: 0.2em 0 1.2em 0;
    }
    .menu {
        width: 3.14286em;
        height: 3.14286em;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
    }
    .menu:after {
        width: 44px;
        font-size: 10px;
        line-height: 100%;
        text-align: center;
        position: absolute;
        bottom: 6px;
        left: 0;
    }
    .mbar1, .mbar2, .mbar3 {
        width: 1.71429em;
        height: 0.17857em;
        background: #000;
        position: absolute;
        left: 0.78571em;
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    .mbar1 {
        top: 2em;
    }

    .mbar2 {
        top: 2.42857em;
    }

    .mbar3 {
        top: 2.85714em;
    }

    .mclick1 {
        top: 2.42857em;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .mclick2 {
        opacity: 0;
    }

    .mclick3 {
        top: 2.42857em;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
}

/* footer */
footer.fpc {
    display: block;
    margin: 150px 0 0 0;
    width: 100%;
}
.footcopy{
  font-size: 12px;
  text-align: center;
    color: #777;
}

/* sp-footer */
@media screen and (max-width: 768px) {
    footer.fpc {
        margin: 10% 0 0 0;
    }
    .footcopy{
      font-size: 2.8vw;
        letter-spacing: 0;
    }
}



.txtsize10 {font-size: 10px;}
.txtsize12 {font-size: 12px;}
.txtsize13 {font-size: 13px;}
.txtsize14 {font-size: 14px;}
.txtsize16 {font-size: 16px;}
.txtsize17 {font-size: 17px;}
.txtsize18 {font-size: 18px;}
.txtsize20 {font-size: 20px;}
.txtsize21 {font-size: 21px;}
.txtsize22 {font-size: 22px;}
.txtline16 {line-height: 1.6;}
.txtsp05 {letter-spacing: 0.05em;}
.txtsp20 {letter-spacing: 0.2em;}
.txtcenter {text-align: center;}
.txtbold {font-weight: bold;}
@media screen and (max-width: 768px) {
    .txtsize10 {font-size: 2.6vw;}
    .txtsize12 {font-size: 2.6vw;}
    .txtsize13 {font-size: 2.9vw;}
    .txtsize14 {font-size: 3.2vw;}
    .txtsize16 {font-size: 3.8vw;}
    .txtsize17 {font-size: 4.1vw;}
    .txtsize18 {font-size: 4.4vw;}
    .txtsize20 {font-size: 5.0vw;}
    .txtsize21 {font-size: 5.3vw;}
    .txtsize22 {font-size: 5.6vw;}
    .txtline16 {line-height: 1.6;}
}

.mtsp10{margin-top: 10px !important;}
.mtsp20{margin-top: 20px !important;}
.mtsp30{margin-top: 30px !important;}
.mtsp40{margin-top: 40px !important;}
.mtsp50{margin-top: 50px !important;}
.mtsp60{margin-top: 60px !important;}
.mtsp70{margin-top: 70px !important;}
.mtsp80{margin-top: 80px !important;}
.mtsp90{margin-top: 90px !important;}
.mtsp100{margin-top: 100px !important;}
.mtsp120{margin-top: 120px !important;}
.mtsp150{margin-top: 150px !important;}
.mtsp200{margin-top: 200px !important;}
@media screen and (max-width: 768px) {
	.mtsp10{margin-top: 2.2vw !important;}
	.mtsp15{margin-top: 3.3vw !important;}
	.mtsp20{margin-top: 4.4vw !important;}
	.mtsp30{margin-top: 6.6vw !important;}
	.mtsp40{margin-top: 8.8vw !important;}
	.mtsp50{margin-top: 11vw !important;}
	.mtsp60{margin-top: 13.2vw !important;}
	.mtsp70{margin-top: 15.4vw !important;}
	.mtsp80{margin-top: 17.6vw !important;}
	.mtsp90{margin-top: 19.8vw !important;}
	.mtsp100{margin-top: 22vw !important;}
	.mtsp120{margin-top: 26.4vw !important;}
	.mtsp150{margin-top: 33vw !important;}
	.mtsp200{margin-top: 44vw !important;}
}



/* ロールオーバー時の反調 */
img.imgwhite, img.imgwhite2{
    cursor:pointer;
    transition: opacity 0.3s ease-in-out;
}
img.imgwhite:hover{
    cursor:pointer;
    opacity: 0.6;
}
img.imgwhite2:hover{
    cursor:pointer;
    margin-top: -2px;
    opacity: 0.6;
}