@charset "UTF-8";

/* =====================================
	共通パーツ
===================================== */
.comBtn01 {
  background-color: #0086D1;
  color: #fff;
  display: table;
  position: relative;
  padding: 20px 50px 20px 20px;
  border-radius: 8px;
  margin: 0 auto;
  width: 520px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 23px;
  text-align: center;
  line-height: 1.45; }
  .comBtn01::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: rotate(45deg);
    transition: 0.3s all ease; }

.comItmeList {
  overflow: hidden;
  margin: 50px auto 78px auto;
  padding-bottom: 5px; }
  .comItmeList ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1.82%; }
    .comItmeList ul li {
      width: 18.13%;
      margin-bottom: 42px;
      position: relative;
      margin-left: 1.82%;
	  text-align:left; }
      .comItmeList ul li:nth-last-child(-n+5) {
        margin-bottom: 0; }
      .comItmeList ul li .wrap {
        width: 100%;
        padding-top: 140%;
        box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        background: #fff;
        position: relative; }
        .comItmeList ul li .wrap img {
          width: 100%;
          object-fit: contain;
          object-position: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
        .comItmeList ul li .wrap .overlay {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 5%;
          left: 0;
          background: rgba(51, 51, 51, 0.8);
          color: #fff;
          line-height: 1.3;
          opacity: 0;
          transition: 0.3s all ease; }
          .comItmeList ul li .wrap .overlay.active {
            opacity: 1;
            top: 0; }
		  .comItmeList ul li .wrap .overlay a{
			width: 100%;
			height: 100%;
			padding: 20px 15px 10px;
			display: block;
			color: #FFFFFF;}
          .comItmeList ul li .wrap .overlay h4 {
            font-size: 1.3rem;
            margin-bottom: 16px; }
          .comItmeList ul li .wrap .overlay p {
            font-size: 1.0rem; }
          .comItmeList ul li .wrap .overlay .link_wrap {
            font-size: 1.0rem;
            color: #fff;
            display: table;
            padding-right: 17px;
            position: absolute;
            bottom: 10px;
            right: 15px; }
            .comItmeList ul li .wrap .overlay .link_wrap::before {
              content: "";
              background: url("../img/common/arrow01.svg");
              background-size: contain;
              width: 11px;
              height: 8px;
              position: absolute;
              top: 24%;
              right: 0; }
      @media (hover: hover) {
        .comItmeList ul li:hover .wrap .overlay {
          opacity: 1;
          top: 0; }
		}
      .comItmeList ul li .cat {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1;
        padding: 6px 10px 0;
        height: 28px;
        color: #fff;
        text-align: center;
        display: table;
        margin-top: 15px; }
      .comItmeList ul li .new {
        background: #f3ca33; }
      .comItmeList ul li .anniversary {
        background: #db5764; }
      .comItmeList ul li .recommend {
        background: #00b0b8; }
      .comItmeList ul li .year {
        font-size: 1.5rem;
		padding: 8px 15px 0;
        background: #808080; }

.pageNavi {
  display: flex;
  align-items: center;
  justify-content: center; }
  .pageNavi li {
    font-weight: bold; }
    .pageNavi li {
	  color:#888888 !important; }
    .pageNavi li.blank, .pageNavi li.blank {
      color:#CCCCCC !important; }
    .pageNavi li.page-count {
      margin: 0 60px; }
    .pageNavi li.prev + .prev, .pageNavi li.next + .next {
      display:none !important; }
	  
    .pageNavi li a {
      color: #888888; }

.viewSp {
  display: none; }

.bottom_link{
	padding:45px 20px;
	background:#F5F6F8;
}

.bottom_link ul{
	width: 100%;
	margin:0 auto;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}

.bottom_link ul li{
	width: 360px;
}

.bottom_link ul li + li{
	margin-left:clamp( 20px, calc( -63.22510822510823px + 10.822510822510822vw ), 45px );
}

.bottom_link .comBtn01 {
	width: 100%;
	height:90px;
	padding:0;
	background-color: #fff;
	color: #0086D1;
	border: #0086D1 1px solid;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.45;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
}
  .comBtn01::before {
	width: 10px;
    height: 10px;
    margin-top: -5px;
    border-top: solid 1px #0086D1;
    border-right: solid 1px #0086D1;
    right: 15px;
    top: 50%;
}


/* =====================================
	検索
===================================== */

.search{
    width: 100%;
    padding: 66px 40px 110px;
    position: relative;
}

.search .inner{
    width: 100%;
    max-width: 1105px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.search h2{
      margin:0 auto 70px;
      font-size: 48px;
      color: #0086d1;
      font-weight: bold;
	  text-align:center;
      letter-spacing: 0.1em; 
}

.search_box {
    max-width: 750px;
	width: 100%;
	margin:0 auto 200px;
	text-align:center;
	position:relative;
}

.search_box input[type=text] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 30px 20px;
	width:100%;
	font-size: 1.8rem;
    border-radius: 8px;
    border: #E0E0E0 1px solid;
    background-color: #FFFFFF;
}

.search_box input[type=submit] {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    background-color: #262626;
	font-size: 1.622rem;
	color: #FFFFFF;
	position:absolute;
	top:50%;
	right:10px;
	font-size: 2rem;
	transform: translateY(-50%);
	cursor:pointer;
}

.search_box input[type=submit]:hover {
	opacity:0.6;
}

input::-webkit-input-placeholder {
    color: #BEBEBE;
}
input:-moz-placeholder {
    color: #BEBEBE;
}
input::-moz-placeholder {
    color: #BEBEBE;
}
input:-ms-input-placeholder {
    color: #BEBEBE;
}

.search h3, .search h3 + p {
	font-size: 1.8rem;
	text-align:center;
}

.search h3 {
	margin-top:-140px;
}

.search h3 + p {
	margin-bottom:40px;
}

.search .nomatch {
	margin-top:100px;
}


/* =====================================
	全体設定
===================================== */

#message, #outline, #history, #outline_mp, #pub_anc, #license, #produce, #promotion {
      scroll-margin-top: 60px;
}


/* =====================================
	header
===================================== */


/* =====================================
	main
===================================== */


.snav{
    width: 100%;
    height: 74px;
    background: #0086d1;
    padding: 18px 40px 0;
}

.snav ul{
    width: 70%;
    max-width: 830px;
    margin: 0 auto;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.snav ul li{
    width: 33.3333%;
}

.snav ul li a{
    width: 100%;
    text-align: center;
    font-size: 1.622rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    display: block;
    transition: 0.3s all ease;
}

.snav ul li a:hover{
    opacity: 1;
    color: #80c2e8;
}

.snav ul li a span{
    width: 100%;
    border-left: 1px solid #fff;
    display: block;
    margin-top: 5px;
    padding-bottom: 14px;
    position: relative;
}

.snav ul li a span svg{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.snav ul li a span svg .arrow01{
    transition: 0.3s all ease;
}

.snav ul li a:hover span svg .arrow01{
    stroke: #80c2e8;
}

.snav ul li:nth-child(3) a span{
    border-right: 1px solid #fff;
}

.snav.en ul li:nth-child(3) a span{
    border-right: 1px solid #fff;
}

.visual.gundam .snav.en ul li:nth-child(3) a span{

}

.snav ul li a img{
    margin: 0 0 0 auto;
    width: 89.8497%;
}

.visual{
    width: 100%;
    background: url("../img/bg_work.png") no-repeat center;
	background-size: cover;
}

.visual .inner{
    width: 100%;
    max-width: 1200px;
    height: 316px;
    margin: 0 auto;
    position: relative;
}

.visual .inner h1{
    font-size: 7.314rem;
    font-weight: bold;
	text-align: center;
    line-height: 1;
    color: #fff;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.visual .inner h1 small{
    font-size: 1.995rem;
    display: block;
    margin-top: 6px;
}

.visual .inner img{
    position: absolute;
    bottom: 0;
    right: 19.167%;
}

.main_cnt::before{
    content: "";
    width: 100%;
    height: 965px;
    position: absolute;
    top: 25px;
    right: 0;
    background: #e5f3fa;
    background-size: cover;
    clip-path: polygon(0 508px, 100% 0%, 100% calc(100% - 508px), 0% 100%);
}

.main_cnt::after{
    content: "";
    width: 100%;
    height: 965px;
    position: absolute;
    top: 25px;
    left: 0;
    background: #fff;
    transition: 1.4s all ease;
}

.main_cnt.active::after{
    width: 0;
}


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


}



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

  .comBtn01 {
	width:100% !important;
	max-width:640px !important;
    font-size: 1.6rem;
    padding: 15px 20px; }
    .comBtn01::before {
      width: 10px;
      height: 10px;
      margin-top: -5px;
      right: 20px; }
    .comBtn01.sp_small {
	width:93% !important; }

  .comItmeList {
    margin: 30px auto 10px auto;
	padding: 0 5.33vw 0; }
    .comItmeList ul {
      justify-content: space-between;
      margin-left: 0; }
      .comItmeList ul li {
        width: 48%;
        margin-left: 0;
        margin-bottom: 6.133vw !important; }

  .pageNavi {
    width: 90%;
    margin: 0 auto; }

  .viewPc {
    display: none; }

  .viewSp {
    display: block; }

.bottom_link{
	padding:30px 20px;
}

.bottom_link ul{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.bottom_link ul li{
	width: clamp( 300px, calc( 264px + 9.6vw ), 360px );
}

.bottom_link ul li + li{
	margin-left:0;
	margin-top:20px;
}

.bottom_link .comBtn01 {
	height:70px;
	border-radius: 8px;
	font-size: 15px;
}
  .comBtn01::before {
	width: 8px;
    height: 8px;
    right: 15px;
}



/* =====================================
	検索
===================================== */

.search{
    padding: 10.133vw 5.33vw 16.4vw;
}

.search h2{
	margin:0 0 8.33vw;
    font-size: 3rem;
}

.search_box input[type=text] {
    padding: 20px 15px;
}

.search_box input[type=submit] {
    padding: 8px 10px;
	font-size: 1.6rem;
}

.search_box input[type=submit]:hover {
	opacity:1;
}

.search h3 {
	margin-top:-160px;
}

.search h3, .search h3 + p {
	font-size: 1.6rem;
	text-align:center;
}


/* =====================================
	main
===================================== */

.select{
    background: #fff;
    height: 14.67vw;
    width: 100%;
    border-radius: 1.33vw;
    position: relative;
    z-index: 1;
}

.select::after{
    position: absolute;
    content: '';
    width: 4.533vw;
    height: 2.133vw;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    background: url("../img/property/arrow02.svg");
    background-size: 4.533vw 2.133vw;
    z-index: -1;
}

.select::before{
    position: absolute;
    content: '';
    width: 0.267vw;
    height: 11.467vw;
    right: 11.733vw;
    top: 50%;
    transform: translateY(-50%);
    background: #0086d1;
    z-index: -1;
}

select{
    /* 初期化 */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: #0086d1;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1;
    width: 100%;
    height: 100%;
    padding: 0.55vw 0 0 4vw;
}

.main_select{
    width: auto;
	margin: 25px 5.33vw 0;
	border: #0086d1 1px solid;
}

.license_detail .main_select{
	margin: 25px 5.33vw 30px;
}

.snav{
    height: 25.33vw;
    padding: 6vw 5.33vw 0;
    display: flex;
    justify-content: space-between;
}

.snav ul{
    width: auto;
    display: block;
    margin: 0;
}

.snav ul li:last-child{
    width: 27.467vw;
}

.snav ul li a img{
    width: 100%;
}

.visual{
    height: 42.133vw;
    background: url("../img/bg_work_sp.png") repeat-x center;
    background-size: auto 42.133vw;
}

.visual .inner{
    height: 42.133vw;
	overflow:hidden;
}

.visual .inner h1{
    font-size: 9.752vw;
}

.visual .inner h1 small{
    font-size: 2.66vw;
    margin-top: 0.8vw;
}

.visual .inner img{
    right: 6.267vw;
    width: 45.733vw;
}

.license_page .visual .inner img{
    right: 0;
    width: 65%;
}

.main_cnt{
    padding: 10.133vw 5.33vw 16.4vw;
}

.main_cnt::before{
    height: 102.67vw;
    top: 13.6vw;
    clip-path: polygon(0 42.4vw, 100% 0%, 100% calc(100% - 42.4vw), 0% 100%);
}

.main_cnt::after{
    height: 102.67vw;
    top: 13.6vw;
}

ul li .overlay a{
	position:absolute;
    font-size: 2.54267vw;
    padding: 4.267vw 3.467vw 0;
	z-index:10;
}


/* =====================================
	footer
===================================== */



}