@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;600&display=swap');



body {
  font-family: 'Noto Sans JP', sans-serif;
  background:#1e1f20;
  color: rgba(255,255,255,.9);
}
a.btn{background-color:rgba(255,255,255,.1); display:inline-block; line-height:1; white-space:nowrap; border:1px solid rgba(255,255,255,.7) !important; padding: .9em 1.5em 1em 1.5em; color:rgba(255,255,255,1);}
a.btn:hover{background-color:rgba(255,255,255,.5);}
p + a.btn, img + a.btn{margin-top:1.5em;}


.sp{display:none !important;}
@media only screen and ( max-width : 600px ) {
.pc{display:none !important;}
.sp{display:inherit !important;}
}


/*レイアウト*/
#contents{padding-left:300px;}
#side{position:fixed;top:0; left:0; z-index:7999 !important; overflow-y:auto;}
@media only screen and ( max-width : 768px ) {
#contents{padding-left:300px;}
}
@media only screen and ( max-width : 600px ) {
#contents{padding-left:0px; padding-top: 60px;}
#side{width:100%;}
}


#contents > section > .inner{padding:0 80px; max-width:1400px; margin:0 auto;}
body.works #contents > section > .inner{padding:0 80px; max-width:1100px; margin:0 auto;}
@media only screen and (max-width : 1000px ) {
#contents > section > .inner, body.works #contents > section > .inner{padding:0 5%;}
}
@media only screen and (max-width : 600px ) {
#contents > section > .inner, body.works #contents > section > .inner{padding:0 15px;}
}


/*
********************** NAV **************************
*/

/*SIDE*/
#side ul{list-style:none; padding:0; margin:0; background-color:#111;}

/*side*/
#side .inner {
  position: relative;
  width: 285px;
  height: 100vh;
  background-color:#111;
  padding-top: 50px;
}
@media only screen and ( max-width : 768px ) {
#side .inner {width: 285px;  padding-top: 40px;}
}
@media only screen and ( max-width : 600px ) {
#side .inner {width: auto; height: auto;  padding-top:0;
}
}
#side .inner:after {
  position: absolute;
  content: "";
  top: 0;
  left: -50px;
  right: 0;
  z-index: -1;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  border-radius:200px;
  transform: scale(0.75);
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
  background: linear-gradient(270deg, #f0ff9b, #0fffc1 30%, #8200ff 60%, #ff0000);
  background-size: 200% 200%;
  animation: animateGlow 10s ease infinite;
}
@media only screen and ( max-width : 600px ) {
#side .inner:after {
  top: 0px;
  left: 0px;
  height: 50px;
  width: 100%;
  filter: blur(20px);
  border-radius:50px;
}
}
@keyframes animateGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*SYSTEM*/
@media screen and (max-width: 600px) {
#global-navi {position: fixed; top: 0; right: 0; padding:0 20px;}
#gnav nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    z-index: 2;
}
#gnav nav ul li {display:block;}
#gnav .btn-gnavi {
    position: fixed;
    top: 3px;
    right: 10px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
#gnav .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 2px;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
#gnav .btn-gnavi span:nth-child(1) {top: 0;}
#gnav .btn-gnavi span:nth-child(2) {top: 12px;}
#gnav .btn-gnavi span:nth-child(3) {top: 24px;}
#gnav .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
}
.nav-ac label {
  margin: 0;
  cursor: pointer;
  min-height: 1em;/*アイコンサイズ保証*/
  padding:0;/*min-heightに合わせた初期設定*/
  display:block;
}
.nav-ac .toggle-content {
  display: none;
}
.nav-ac .icons {
  display: inline-block;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}
.nav-ac .icons .fa, .nav-ac .icons .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}
.nav-ac .icons .fa:last-child ,.nav-ac .icons .fas:last-child{
  opacity: 0;
}
.nav-ac.active .toggle-content {
  display: block;
}
.nav-ac.active .fa:last-child, .nav-ac.active .fas:last-child {
  opacity: 1;
}
.nav-ac.active .fa:first-child, .nav-ac.active .fas:first-child {
  opacity: 1;
}
.nav-ac .icons {
  width: 3em;
  height: 4rem;
  line-height: 1em;
  border-radius: 50%;
  float: right;
}
.nav-ac .icons .fa, .nav-ac .icons .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
}
.nav-ac .icons .fa:last-child, .nav-ac .icons .fas:last-child {
  opacity: 0;
}
.nav-ac.active .toggle-content {
  display: block;
}
.nav-ac.active .fa:last-child, .nav-ac.active .fas:last-child {
  opacity: 1;
}
.nav-ac.active .fa:first-child, .nav-ac.active .fas:first-child {
  opacity: 1;
}

@media screen and (max-width: 600px) {
#global-navi {background-color:#111; padding:0;overflow-y:auto; overflow-x:hidden;}
#gnav .btn-gnavi span {background: white;}
}


ul.menu{margin:0 20px; font-size:1.4rem; padding-bottom: 30px !important;}
ul.menu li{margin:0;}
ul.menu li label{white-space: nowrap; width:100%;}
ul.menu li label, ul.menu > li > a{display:block; padding:10px 30px; transition: 0.5s;}
ul.menu li label:hover, ul.menu > li > a:hover{color:rgba(255,255,255,.6);}

ul.topics, ul.toggle-content{background-color:#252525 !important;}
ul.topics a {font-size:1.3rem; display:block; padding: .7em 2rem; line-height:1.3; color:rgba(255,255,255,.7);}
ul.toggle-content a{font-size:1.3rem; display:block; padding: .7em 2rem .7em 3rem; line-height:1.3; color:rgba(255,255,255,.7);}

ul.topics a:hover, ul.toggle-content a:hover{color:rgba(255,255,255,1);}
ul.topics li:hover, ul.toggle-content li:hover{background-color:rgba(255,255,255,.1); transition: 0.5s;}

ul.menu ul.topics > li{position:relative; padding-left:2.5em;}
ul.menu ul.topics > li:before{content:"-"; position:absolute; top:.2em; left:2rem;}

ul.menu ul.topics > li a:before{position:absolute; top:.7em; left:3rem;}
ul.menu ul.topics > li:nth-child(1) a:before{content:"01";}
ul.menu ul.topics > li:nth-child(2) a:before{content:"02";}
ul.menu ul.topics > li:nth-child(3) a:before{content:"03";}
ul.menu ul.topics > li:nth-child(4) a:before{content:"04";}
ul.menu ul.topics > li:nth-child(5) a:before{content:"05";}
ul.menu ul.topics > li:nth-child(6) a:before{content:"06";}
ul.menu ul.topics > li:nth-child(7) a:before{content:"07";}
ul.menu ul.topics > li:nth-child(8) a:before{content:"08";}
ul.menu ul.topics > li:nth-child(9) a:before{content:"09";}

ul.menu ul.topics > li:nth-child(1):before{color:aqua;}
ul.menu ul.topics > li:nth-child(2):before{color:lime;}
ul.menu ul.topics > li:nth-child(3):before{color:yellow;}
ul.menu ul.topics > li:nth-child(4):before{color:orange;}
ul.menu ul.topics > li:nth-child(5):before{color:red;}
ul.menu ul.topics > li:nth-child(6):before{color:magenta;}
ul.menu ul.topics > li:nth-child(7):before{color:blueviolet;}
ul.menu ul.topics > li:nth-child(8):before{color:royalblue;}
ul.menu ul.topics > li:nth-child(9):before{color:lavender;}

ul.menu ul.books > li a:before{position:absolute; top:.7em; left:3rem;}
ul.menu ul.books > li:nth-child(1) a:before{content:"01";}
ul.menu ul.books > li:nth-child(2) a:before{content:"02";}
ul.menu ul.books > li:nth-child(3) a:before{content:"03";}
ul.menu ul.books > li:nth-child(4) a:before{content:"04";}
ul.menu ul.books > li:nth-child(5) a:before{content:"05";}
ul.menu ul.books > li:nth-child(6) a:before{content:"06";}
ul.menu ul.books > li:nth-child(7) a:before{content:"07";}
ul.menu ul.books > li:nth-child(8) a:before{content:"08";}
ul.menu ul.books > li:nth-child(9) a:before{content:"09";}

ul.menu ul.books > li:nth-child(1):before{color:aqua;}
ul.menu ul.books > li:nth-child(2):before{color:lime;}
ul.menu ul.books > li:nth-child(3):before{color:yellow;}
ul.menu ul.books > li:nth-child(4):before{color:orange;}
ul.menu ul.books > li:nth-child(5):before{color:red;}
ul.menu ul.books > li:nth-child(6):before{color:magenta;}
ul.menu ul.books > li:nth-child(7):before{color:blueviolet;}
ul.menu ul.books > li:nth-child(8):before{color:royalblue;}
ul.menu ul.books > li:nth-child(9):before{color:lavender;}


@media screen and (max-width: 768px) {
ul.menu li label, ul.menu > li > a{padding:10px;}
ul.toggle-content a{padding: .5em 1rem; letter-spacing:0;}
ul.menu ul.topics > li:before{left:1rem;}
ul.menu ul.topics > li a:before{left:2rem;}
ul.menu ul.topics > li{position:relative; padding-left:1.8em;}
ul.menu ul.books > li:before{left:1rem;}
ul.menu ul.books > li a:before{left:2rem;}
ul.menu ul.books > li{position:relative; padding-left:1.8em;}

}

/*振り分け*/
body.works ul.menu > li.works .toggle
{display:inherit;}
ul.menu > li > label:hover, ul.menu > li > a:hover{background-color:rgba(255,255,255,.05);}
body#top ul.menu > li:nth-child(1),
body#company ul.menu > li:nth-child(2),
/*body.works ul.menu > li:nth-child(3),*/
body#profile ul.menu > li:nth-child(4),
body#books ul.menu > li:nth-child(5),
body#link ul.menu > li:nth-child(6),
body#sitemap ul.menu > li:nth-child(7)
{background-color:rgba(255,255,255,.05);}

body#works01 ul.menu > li.works ul > li:nth-child(1),
body#works02 ul.menu > li.works ul > li:nth-child(2),
body#works03 ul.menu > li.works ul > li:nth-child(3),
body#works03_1 ul.menu > li.works ul > li:nth-child(4),
body#works04 ul.menu > li.works ul > li:nth-child(5),
body#works05 ul.menu > li.works ul > li:nth-child(6),
body#works06 ul.menu > li.works ul > li:nth-child(7),
body#works07 ul.menu > li.works ul > li:nth-child(8),
body#works08 ul.menu > li.works ul > li:nth-child(9),
body#works09 ul.menu > li.works ul > li:nth-child(10),
body#works10 ul.menu > li.works ul > li:nth-child(11)
{background-color:rgba(255,255,255,.1);}



/*logo*/
.logo{margin:0 15px 100px 15px;}
@media only screen and ( max-width : 768px ) {
.logo{margin:0 10px 100px 10px;}
}
@media screen and (max-width: 600px) {
.logo{margin:10px; display:inline-block;}
.logo img{height:40px; width:auto;}
}

/*h_btn*/
ul.menu .h_btn{position:absolute; top:150px; left:0; width:100%; text-align:center;}
@media screen and (max-width: 768px) {
ul.menu .h_btn{position:absolute; top:130px;}
}
@media screen and (max-width: 600px) {
ul.menu .h_btn{position:absolute; top:13px; left:0; text-align:right; padding-right: 50px;}
}
body#side .h_btn .pc{display:none;}
ul.menu .h_btn a{display:inline-block; white-space:nowrap; line-height:1;}
ul.menu .h_btn .pc a{font-size:1.1rem; padding:.7em 0 .8em 0; border:1px solid rgba(255,255,255,.3); background-color:rgba(255,255,255,.1); color:rgba(255,255,255,.8);border-radius:2rem; width:3rem; text-align:center;}
ul.menu .h_btn .pc a.sitemap{padding:.7em .9em .8em 1em;  width:auto; border-radius:3px; letter-spacing:1px;}
ul.menu .h_btn .pc a:hover{background-color:rgba(255,255,255,.5);}
ul.menu .h_btn .pc a+a{margin-left:.5em;}
ul.menu .h_btn .sp a{width:25px; height:25px; margin:0 5px;}
ul.menu .h_btn .sp a:hover{opacity: .5;}
body.ja a.ja, body.en a.en{opacity:.3 !important;background-color:rgba(255,255,255,.1) !important;}



/*footer*/
p.to-top{display:block; width:90px; height:90px; line-height:90px; text-align:center; opacity:.5; position:fixed; bottom:0; right:0; color:#fff; background-color:rgba(70,70,70,1); cursor:pointer; margin:0;}
p.to-top:hover{opacity:1;}
p.to-top:before{content:""; display:block; width:20px; height:20px; border-top:2px solid; border-left:2px solid;-webkit-transform: rotate(45deg);transform: rotate(45deg); margin:40px 0 0 38px;}
footer p.copy{text-align:center; letter-spacing:1px; text-indent:1px; font-size:1.1rem; color:rgba(255,255,255,.3); padding: 15px 0; line-height: 1.3; margin-top: 80px;}
@media screen and (max-width: 1000px) {
p.to-top{width:60px; height:60px; line-height:60px;}
p.to-top:before{width:15px; height:15px; margin:25px 0 0 25px;}
}
@media screen and (max-width: 768px) {
p.to-top{width:50px; height:50px; line-height:50px;}
p.to-top:before{margin:22px 0 0 18px;}
footer p.copy{font-size:1rem;}
}
@media screen and (max-width: 600px) {
footer p.copy{margin:40px 0;}
}


/*INDEX*/



/*h*/
#contents h1{font-size:2.8rem; margin:3em 0 1.5em 0; padding: 0; line-height:1.3;}
#contents h2{font-size:2.4rem; margin:2em 0 1em 0; padding: 0; line-height:1.3;}
#contents h3{font-size:2rem; margin:2em 0 1em 0; padding: 0; line-height:1.3;}
#contents h4{font-size:1.4rem; margin:2em 0 1.5em 0; padding: 0; line-height:1.3; 
  font-weight:normal; border:1px solid rgba(255,255,255,.5); padding:5px 1em 7px 1em;}
@media only screen and (max-width : 768px ) {
#contents h1{font-size:2.4rem; margin:2em 0 1.5em 0;}
#contents h2{font-size:2rem;}
#contents h3{font-size:1.7rem;}
}
@media only screen and (max-width : 600px ) {
#contents h1{margin:1.5em 0}
}
@media only screen and (max-width : 450px ) {
#contents h1{margin:1em 0 1.5em 0}
}

body#top #contents h1{text-align:center; margin:50px 0 100px 0;}
body#top #contents h1 img{height:50px; width:auto;}
@media only screen and (max-width : 768px ) {
body#top #contents h1 img{height:30px;}
body#top #contents h1{margin:50px 0;}
}


/*p*/
#contents section p+p{margin-top:.8em;}
#contents h4+p{padding-left:10px;}
#contents p.indent{text-indent:1.5em;}


/*hr*/
#contents hr{border:0; display:block; margin:60px auto; width:70px; height:4px; background-color:rgba(255,255,255,.5);}
#contents hr.long{width:auto; height:1px; background-color:rgba(255,255,255,.2);}
#contents hr.white{background-color:rgba(255,255,255,.5) !important;}
#contents hr.long.white{width:auto; height:1px; background-color:rgba(255,255,255,.2);}

/*list*/
#contents ul{margin:0; padding:0 0 0 1.5em;}
#contents ol{margin:0; padding:0 0 0 1.3em;}
#contents ul li{margin:.3em 0; padding:0; font-size:1.5rem;}
#contents ol li{margin:.3em 0; padding:0 0 0 .2em; font-size:1.5rem;}
#contents ul{list-style:none;}
#contents ul li{margin:.3em 0; padding:0; position:relative;}
#contents ul li:before{content:"";display:block; background-color:rgba(255,255,255,.2); width:8px; height:8px; border-radius:8px; position:absolute; top:.6em; left:-1.3em;}
#contents ul li data, #contents ol li data{font-size:1.2rem; display:inline-block; margin-left:1em;}
#contents ul.arrow {padding:0 0 0 2em;}
#contents ul.arrow li{margin:1.5em 0;}
#contents ul.arrow li:before{background-color:inherit; border-radius:0; border-top:solid 2px; border-right:solid 2px;-webkit-transform: rotate(45deg);transform: rotate(45deg); left:-1.5em;}
#contents ul.small li{font-size:1.4rem;}


/*table*/
#contents table{width:100%;}
#contents table.inline{width:auto;}
#contents table th,#contents table td{text-align:left; vertical-align:top; padding:0 10px;}



/*column*/
.column_2{column-count: 2; column-gap: 60px;}
.column_3{column-count: 3; column-gap: 60px;}
.column_2 li, .column_3 li{font-size:1.4rem !important;}
@media only screen and (max-width : 768px ) {
.column_2,.column_3{column-gap: 30px;}
}
@media only screen and (max-width :450px ) {
.column_2,.column_3{column-count: 1; column-gap:0;}
}


/*INDEX*/

/*INFO*/
.info{text-align:center; margin:50px 0; padding:30px; border:1px solid rgba(255,255,255,.3); border-radius: 5px;}
.info h2{margin:0 0 1em 0 !important;}
@media only screen and (max-width : 600px ) {
.info{text-align:left; margin:20px 0 50px 0; padding:20px;}
}


/*topics*/
#topics .topic{position:relative; padding:0 0 100px 0;}
#topics .topic:last-child{padding-bottom:0;}
#topics .topic > a.anc{position:absolute; top:0; left:0;}
#topics .topic ul.slider{position:absolute; top:-50px; left:0;}
#topics .topic .inner{background-color:rgba(255,255,255,.05); min-height:450px; margin-left: 100px; padding: 50px 50px 50px 310px;}

.slider{width:350px !important; padding:0 !important; margin:0 !important;}
.slider li{margin:0 !important;}
.slider li:before{display:none !important;}
.slider li > div{height:450px; background-position:center center;}
.slider li > div.left{background-position:left;}
.slider li > div.right{background-position:right;}
.slider li > div.top{background-position:top;}
.slider li > div.bottom{background-position:bottom;}
.slider li > div.full{background-size:contain; background-repeat:no-repeat;}
.slick-dots li button:before
{font-size: 10px; line-height: 10px; width: 10px; height: 10px;
content: '●'; color: rgba(255,255,255,1); transition-duration: .3s;}
.slick-dots li.slick-active button:before{opacity: 1;}
.slick-dots{bottom:-35px !important;}
.slick-dots li+li{margin-left:10px;}
@media only screen and (max-width : 1000px ) {
.slider{width:250px !important;}
.slider li > div{height:350px;}
#topics .topic .inner{min-height:350px; margin-left: 70px; padding: 30px 30px 60px 210px;}
}
@media only screen and (max-width : 768px ) {
#topics .topic{position:relative;  padding:15px 0 50px 0;}
#topics .topic ul.slider{top:0;}
#topics .topic .inner{padding:360px 15px 60px 15px; margin:0;}
.slider {width:100% !important; overflow:hidden;}
.slider li > div{height:350px;}
.slick-dots{bottom:0 !important; background-color:#292a2b;}
.slick-dots li button:before{margin-top: 5px;}
.slick-dots {padding:0 0 0 .6em !important; margin:0 !important;}
}
@media only screen and (max-width : 600px ) {
#topics .topic > a.anc{top:-50px;}
}

#topics .topic .inner:before{content:""; display:block; height:1px; width:25%; max-width:250px; position:absolute; top:0; right:0; z-index:99; }
#topics .list > .topic:nth-child(1) .inner:before, #topics .list > .topic:nth-child(1) .inner hr{background-color:aqua;}
#topics .list > .topic:nth-child(2) .inner:before, #topics .list > .topic:nth-child(2) .inner hr{background-color:lime;}
#topics .list > .topic:nth-child(3) .inner:before, #topics .list > .topic:nth-child(3) .inner hr{background-color:yellow;}
#topics .list > .topic:nth-child(4) .inner:before, #topics .list > .topic:nth-child(4) .inner hr{background-color:orange;}
#topics .list > .topic:nth-child(5) .inner:before, #topics .list > .topic:nth-child(5) .inner hr{background-color:red;}
#topics .list > .topic:nth-child(6) .inner:before, #topics .list > .topic:nth-child(6) .inner hr{background-color:magenta;}
#topics .list > .topic:nth-child(7) .inner:before, #topics .list > .topic:nth-child(7) .inner hr{background-color:blueviolet;}
#topics .list > .topic:nth-child(8) .inner:before, #topics .list > .topic:nth-child(8) .inner hr{background-color:royalblue;}
#topics .list > .topic:nth-child(9) .inner:before, #topics .list > .topic:nth-child(9) .inner hr{background-color:lavender;}
#topics .list > .topic .inner hr{opacity:.7;}
@media only screen and (max-width : 768px ) {
#topics .topic .inner:before{top:inherit; bottom:50px;}
#topics .list > .topic:last-child .inner:before{bottom:0;}
}

#topics .topic h2{position:relative; line-height:1.5; padding-left:100px; min-height:3em; margin:0 0 1.5em 0;}
#topics .topic h2 label{font-size:16px; line-height:1.3; display:inline-block; margin:0; padding:0;}
#topics .topic h2 data{position:absolute; top:0; left:0;line-height:1; font-family:arial; text-align:center; font-weight:normal;}
#topics .topic h2 data:before{content:"TOPICS"; display:block; font-size:15px;}
#topics .topic h2 data:after{display:block; font-size:60px;}
#topics .topic:nth-child(1) h2 data:after{content:"01";}
#topics .topic:nth-child(2) h2 data:after{content:"02";}
#topics .topic:nth-child(3) h2 data:after{content:"03";}
#topics .topic:nth-child(4) h2 data:after{content:"04";}
#topics .topic:nth-child(5) h2 data:after{content:"05";}
#topics .topic:nth-child(6) h2 data:after{content:"06";}
#topics .topic:nth-child(7) h2 data:after{content:"07";}
#topics .topic:nth-child(8) h2 data:after{content:"08";}
#topics .topic:nth-child(9) h2 data:after{content:"09";}
@media only screen and (max-width : 768px ) {
#topics .topic h2 data:before{font-size:14px;}
#topics .topic h2 data:after{font-size:50px;}
#topics .topic h2{padding-left:80px;}
}
@media only screen and (max-width : 450px ) {
#topics .topic h2 data{position:inherit; display:block; margin-bottom: 1em;}
#topics .topic h2 data:before{font-size:13px;}
#topics .topic h2 data:after{font-size:40px;}
#topics .topic h2{padding-left:0;}
}

#topics .topic.noimg ul.slider{display:none;}
#topics .topic.noimg .inner{min-height:inherit; padding-left: 50px;}
#topics .topic.noimg h2{margin-top:0;}
@media only screen and (max-width : 1000px ) {
#topics .topic.noimg .inner{padding: 60px 30px;}
}
@media only screen and (max-width : 768px ) {
#topics .topic.noimg .inner{padding:60px 15px !important;}
}
@media only screen and (max-width : 500px ) {
#topics .topic.noimg .inner:before{top:3px;}
#topics .topic.noimg .inner{padding-left: 0;}
}

#topics .topic .text a{border-bottom:1px solid rgba(255,255,255,.3);}
#topics .topic .text a:after{margin-right:.7em;}
#topics .topic .text a.btn:after{margin-right:0;}
#topics .topic .text td{line-height:1.3;}
#topics .topic .text tr+tr td{padding-top:10px;}
#topics .topic .text a.btn{margin-right:auto; margin-left: auto; display:block; text-align:center; max-width:300px;}
#topics .topic .text p > img, #topics .topic .text p+img, #topics .topic .text img+p, #topics .topic .text table+img, #topics .topic .text img+table{margin-top:2em;}

table.line,table.line th, table.line td{border:1px solid rgba(255,255,255,.3);}
table.line th, table.line td{padding:5px 10px !important;}
#topics .topic tr > td{vertical-align:left; text-align:top;}
#topics .topic .center tr > td{vertical-align:middle; text-align:center;}
#topics .topic tr > td[align="left"]{text-align:left;}
#topics .topic tr > td[align="center"]{text-align:center;}
#topics .topic tr > td[align="right"]{text-align:right;}
#topics .topic tr > td[valign="top"]{vertical-align:top;}
#topics .topic tr > td[valign="middle"]{vertical-align:middle;}
#topics .topic tr > td[valign="bottom"]{vertical-align:bottom;}

#topics .topic .text table{width:100%;}
#topics .topic .text tr > td:last-child{ width:4em;}
#topics .topic .text tr > td:nth-last-child(2){width:8em;}
#topics .topic .long tr > td:nth-last-child(2){width:12em;}
#topics .topic .other tr > td:last-child, #topics .topic .other tr > td:nth-last-child(2){width:inherit;}



/*company*/
section#office{margin-bottom:80px; background-image:url(../img/bg_office.png); background-size:cover; background-position:center center; background-attachment:fixed; /*border:1px solid red;*/}
section#office .inner{position:relative; padding:80px 20px 80px 350px;}
section#office img.office{width:200px; height:auto; position:absolute; top:80px; left:80px;}


@media only screen and (max-width : 1000px ) {
section#office{margin-bottom:50px;}
section#office .inner{padding:50px 20px 50px 40%;}
section#office img.office{width:30%; top:50px; left:5%;}
}
@media only screen and (max-width : 768px ) {
section#office .inner{position:inherit; padding:50px 20px;}
section#office img.office{position:inherit; display:block; width:250px; margin:0 auto;}
}
@media only screen and (max-width : 600px ) {
section#office{margin-bottom:30px;}
section#office .inner{padding:30px 15px;}
}

section#office h1{margin-top:0;}
section#office dl{display:table; width:100%;}
section#office dl p{margin-top:0;}
section#office dt{display:table-cell; text-align:left; vertical-align:top; width:9em;}
section#office dd{display:table-cell; text-align:left; vertical-align:top;}
section#office dl.palis{border-top:1px solid rgba(255,255,255,.5); margin-top:30px;}
section#office dl.palis dt, section#office dl.palis dd{padding-top:30px;}
section#office dd > data{display:block; margin-top:1em;}
a.btn.map{font-size:1.1rem !important; line-height:12px; padding:.3em .5em !important; margin:0 1em !important; display:inline-block !important; max-width:inherit;}
a.btn.map:before{content:"\f3c5"; display:inline-block; margin-right: .3em; font-family:'Font Awesome 5 Free'; font-weight:600; font-size:85%;}
a.btn.map:after{display:none;}
section#office a.btn data{font-size:1.2rem; color:rgba(255,255,255,.8); display:inline-block; padding:0 0 0 1em;}
@media only screen and (max-width : 768px ) {
section#office dt, section#office dd{padding-top:30px !important;}
}
@media only screen and (max-width : 450px ) {
section#office dl, section#office dt, section#office dd{display:block;width:auto;}
section#office dt{padding-top:20px !important;}
section#office dd{padding-top:10px !important; margin-left:0;}
section#office dt{font-size:1.5rem; font-weight:bold;}
}



/*works*/
body.works .container {display: grid; gap: 60px; grid-template-columns: 1fr 1fr;}
@media only screen and (max-width : 768px ) {
body.works .container {gap: 30px;}
}
@media only screen and (max-width : 600px ) {
body.works .container {gap: 20px;}
}

body.works .container .item {position:relative; padding-bottom:40px;}
body.works .container .item a div{height: 100%;}
body.works .container .item > div{height: 40px; padding-top:10px; line-height:1.3;font-size:1.3rem; position:absolute; bottom:0; left:0; display:block; width:100%;}
body.works h1 a{display:inline-block; white-space:nowrap; line-height:1; border:1px solid rgba(255,255,255,.7); font-size:2rem; font-weight:normal; padding:3px 6px; margin:1em;}
body.works .container .item > div a{display:inline-block; white-space:nowrap; margin-right:1em; line-height:1; border:1px solid rgba(255,255,255,.7); padding:2px 5px 2px 5px; margin-top: 5px;}
body.works h1 a i, body.works .container .item > div a i{margin-left:.5em; display:inline-block;}
body.works .container .item label{line-height:1.3; width:calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:1.3rem; display:inline-block;}
@media only screen and (max-width : 600px ) {
body.works .container .item > div, body.works .container .item label,  body.works .container .item div a{font-size:1.1rem;}
body.works h1 a{font-size:1.2rem; padding:5px;}
}

/*coverimg*/
body.works .container .item a div {
}
body.works .container .item a div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*参考：https://qiita.com/kura07/items/e633b35e33e43240d363*/
.box-big3_l {grid-column: 1; grid-row: 3;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点3⇒終点4 */ 
.box-big4_l {grid-column: 1; grid-row: 4;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点4⇒終点5 */ 
.box-big5_l {grid-column: 1; grid-row: 5;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点5⇒終点6 */ 
.box-big6_l {grid-column: 1; grid-row: 6;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点6⇒終点7 */ 
.box-big4_r {grid-column: 2; grid-row: 4;} /* colomun(幅)：開始点2⇒終点3、　row(高さ)：始点4⇒終点5 */ 
.box-big1_l_h {grid-column: 1 / 2; grid-row: 1 / 3;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点1⇒終点3 */ 
.box-big2_l_h {grid-column: 1 / 2; grid-row: 2 / 4;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点2⇒終点4 */ 
.box-big3_l_h {grid-column: 1 / 2; grid-row: 3 / 5;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点3⇒終点5 */ 
.box-big5_l_h {grid-column: 1 / 2; grid-row: 5 / 6;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点5⇒終点6 */ 
.box-big7_l_h {grid-column: 1 / 2; grid-row: 7 / 8;} /* colomun(幅)：開始点1⇒終点2、　row(高さ)：始点7⇒終点8 */ 
.box-big2_r_h {grid-column: 2 / 3; grid-row: 2 / 4;} /* colomun(幅)：開始点2⇒終点3、　row(高さ)：始点3⇒終点5 */ 
.box-big3_r_h {grid-column: 2 / 3; grid-row: 3 / 5;} /* colomun(幅)：開始点2⇒終点3、　row(高さ)：始点3⇒終点5 */ 
.box-big4_r_h {grid-column: 2 / 3; grid-row: 4 / 6;} /* colomun(幅)：開始点2⇒終点3、　row(高さ)：始点4⇒終点6 */ 
.box-big5_r_h {grid-column: 2 / 3; grid-row: 5 / 7;} /* colomun(幅)：開始点2⇒終点3、　row(高さ)：始点5⇒終点7 */ 
.box-big3_w {grid-column: 1 / 3; grid-row: 3;} /* colomun(幅)：開始点1⇒終点3、　row(高さ)：始点3⇒終点4 */ 
.box-big4_w {grid-column: 1 / 3; grid-row: 4;} /* colomun(幅)：開始点1⇒終点3、　row(高さ)：始点4⇒終点5 */ 
.box-big5_w {grid-column: 1 / 3; grid-row: 5;} /* colomun(幅)：開始点1⇒終点3、　row(高さ)：始点5⇒終点6 */ 
.box-big6_w {grid-column: 1 / 3; grid-row: 6;} /* colomun(幅)：開始点1⇒終点3、　row(高さ)：始点6⇒終点7 */ 


/*modal*/
.modalDialog {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; opacity:0;
    -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none;
    padding:0 10px;/*sp時の隙間*/}
.modalDialog:target {opacity:1; pointer-events: auto;}
.modalDialog > div {position: relative; margin: 10% auto;}
.close {position: absolute; text-align: center; text-decoration: none;}
.modalDialog > div {max-width:800px;}
.close {font-size:25px; line-height: 25px; width: 25px; right:0; top:-30px;}
.modalDialog {background: rgba(50, 50, 50, .9);}
.modalDialog > div {background:rgba(255,255,255,.9);color:#444;}
.close {color:#666;}
.close:hover {color:#fff;}

.modalDialog > div iframe{display:block; width:100%; height:500px;}
@media only screen and (max-width : 768px ) {
.modalDialog > div iframe{height:400px;}  
}
@media only screen and (max-width : 500px ) {
.modalDialog > div iframe{height:300px;}  
}

/*books*/
#books #contents h3{margin-bottom:1.5em;}
#books #contents h3 data{font-weight:normal; font-size:1.6rem;}
#books #contents h3 data:before{content:"（"; margin-left:.5em; margin-right:.3em;}
#books #contents h3 data:after{content:"）"; margin-left:.3em;}
#books #contents dl{display:table; border-bottom:0px solid rgba(255,255,255,.2); margin-bottom: 50px; width:100%;}
#books #contents dt{display:table-cell; font-size: 120%; font-style: bold; text-align:left; vertical-align:top; padding-right:5%; width:30%; max-width:320px; padding-bottom: 50px;}
#books #contents dd img{max-height:240px; margin-top: 20px; margin-bottom:0px; margin-right:0px; display:block;}
#books #contents dd label{line-height:1.3; width:calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:1.3rem; display:inline-block;}
#books #contents dd{display:table-cell; text-align:left; vertical-align:top; padding-bottom: 50px;}
#books #contents dd data{display:block; padding:.6em 0 .7em 0; font-size:1.3rem; margin-bottom: 20px;}
#books #contents dl + h2{margin-top:4em;}
@media only screen and (max-width : 600px ) {
#books #contents dl,#books #contents dt,#books #contents dd{display:block; padding:0; width:auto; margin:0;}
#books #contents dd img{max-width:320px; height:auto; margin:5px auto; display:block;}
#books #contents dd{padding-bottom:30px;}
#books #contents h3 data{font-size:1.3rem;}
#books #contents h3 data:before{margin-left:.2em; margin-right:0;}
#books #contents h3 data:after{margin-left:0;}
}