@charset "UTF-8";

/*
Theme Name: Tankdesign2025
Description: Tankdesignのホームページ
Theme URI: tankdesign.works
Author: Tankdesign
Author URI: tankdesign.works
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

/* Default Style Reset --------------------------------------------------------------------------------------------------------- */
body,form,fieldset{margin: 0px;padding: 0px;}
fieldset          {border:none;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,dd{margin: 0px;padding: 0px;}
blockquote,li,dt,dd  {}
li                   {list-style:none;}
input,textarea       {font-size: 1em;}
img                  {border: 0px none;margin: 0;padding: 0;vertical-align: bottom;}
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}


/* Tag Castam ----------------------------------------------------------------------------------------------------------------- */
body              {font-family: HelveticaLTPro-Roman, "Noto Sans JP", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size: 80%;line-height: 150%;color: #292929;}
em                {font-weight: normal;font-style: normal;}
strong            {}
a                 {text-decoration: none;color: #292929;}
a:link            {}
a:hover           {text-decoration: none;}
a:visited         {}
a:active          {}
input,textarea    {margin: 3px;padding: 2px;}

hr{
	height: 0; /*高さをリセット*/
	margin: 0; /*マージンをリセット*/
	padding: 0; /*パディングをリセット*/
	border: 0; /*ボーダーをリセット*/
}

/* fonts */
@font-face {
  font-family: "cera";
  font-weight: 700;
  src: local("Cera Basic bold"),
       local("CeraBasic-bold"),
       url("https://tankdesign.works/wp/wp-content/themes/tankdesign2025/font/cerabasic-bold-webfont.woff2") format("woff2"),
       url("https://tankdesign.works/wp/wp-content/themes/tankdesign2025/font/cerabasic-bold-webfont.woff") format("woff"),
       url("https://tankdesign.works/wp/wp-content/themes/tankdesign2025/font/cerabasic-bold-webfont.ttf") format("truetype");
  font-display:swap;
}


.sp               {display: none;}
.fit img          {width: 100%;height: 100%;object-fit: cover;}
.center           {text-align: center;}

body.no-scroll    {overflow: hidden;}

h2                {font-family: "Lexend Zetta", sans-serif;font-optical-sizing: auto;font-weight: normal;margin-bottom: 60px;}
.cera             {font-family: "cera", "Lexend Zetta", sans-serif;}

/* nav */
.fat-nav .logo    {width: 500px;height: 500px;position: absolute;left: 16%;top: 50%;transform: translateY(-50%);}

li[data-color="pink"] a    {color: #e9849e;}
li[data-color="orange"] a  {color: #e1725d;}
li[data-color="green"] a   {color: #4d8e39;}
li[data-color="blue"] a    {color: #57aec9;}
li[data-color="yellow"] a  {color: #eab55e;}
li[data-color="red"] a     {color: #b51c34;}


.mask {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  background-color: #e1725d;
  z-index: 9999;
  transform: rotateY(90deg);
  transform-origin: right;
  visibility: hidden;
  pointer-events: none;
  transition-property: transform, visibility;
  transition-duration: .75s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);

  &.is-close {
	transform: rotateY(0deg);
	transform-origin: left;
	visibility: visible;
	pointer-events: auto;
  }
}

.mask[data-color="pink"]   {background-color: #e9849e;}
.mask[data-color="orange"] {background-color: #e1725d;}
.mask[data-color="green"]  {background-color: #4d8e39;}
.mask[data-color="blue"]   {background-color: #57aec9;}
.mask[data-color="yellow"] {background-color: #eab55e;}
.mask[data-color="red"]    {background-color: #b51c34;}

#title-box     {width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 999999;display: none;}
#title-box.view{display: block;}

#title-box span{font-family: "Lexend Zetta", sans-serif;font-optical-sizing: auto;font-weight: normal;font-size: 24px;color: #fff;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);display: block;}

/* header */
#header        {width: 100%;padding-top: 30px;}
#header #id    {width: 130px;height: 80px;margin: 0 auto 50px;}


/* wrapper */
#wrapper        {width: 1080px;margin: auto;}
.text           {font-size: 13px;line-height: 240%;}
.left           {float: left;}
.right          {float: right;}
.container::after{content: "";height: 0;display: block;visibility: hidden;clear: both;}


/* footer */
#footer         {width: 100%;height: 188px;padding-top: 50px;display: block;background-color: #d8d1ca;}
#foot_nav       {text-align: center;}
#foot_nav li    {display: inline;padding: 0 20px;font-family: "Lexend Zetta", sans-serif;font-optical-sizing: auto;font-weight: normal;font-size: 15px;}
#foot_nav li a  {color: #fff;}

/* wrapper */
#wrapper{padding-top: 80px;}

/* cont_box */
#cont_box h2      {font-size: 23px;text-align: center;}

.about #cont_box   {color: #e1725d;}
.works #cont_box   {color: #4d8e39;}
.notes #cont_box   {color: #57aec9;}
.contact #cont_box {color: #eab55e;}
.favorite #cont_box{color: #b51c34;}

#cont_box .inner  {margin-bottom: 100px;}

/* home */
#stage_wrapper      {background-color: #d8d1ca;width: 100%;height: 100vh;position: relative;}
#stage              {width: 100%;height: 100%;}
#stage .logo-box    {width: 500px;height: 500px;position: relative;left: 16%;top: 50%;transform: translateY(-50%);}
/*
#stage .shizuku     {position: absolute;left: 62px;width: 70px;height: 106px;}
*/
.animation {
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0.5s
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.moveDown {
  animation-name: moveDown;
  animation-duration: 0.6s;
  animation-delay: 1.5s
}

@keyframes moveDown {
  from {
    opacity: 0;
    /* top: -10px; */
    transform: matrix(3.555556,0,0,3.555556,0,-50.000016);
  }
  to {
    opacity: 1;
    /* top: 0; */
    transform: matrix(3.555556,0,0,3.555556,0,0.000016);
  }
}


.home #cont_box     {width: 910px;margin: auto;padding-top: 24px;}
.home .container    {margin-bottom: 100px;}

.list_box           {display: flex;flex-wrap: wrap;justify-content: space-between;text-align: center;letter-spacing: 0.1em;}
.list_box .item     {margin-bottom: 40px;width: 274px;}
.list_box .pict     {margin-bottom: 12px;width: 100%;height: 196px}
.list_box .pict img {width: 100%;height: 100%;object-fit: cover;}
.list .btn a        {width: 296px;height: 80px;display: block;margin: auto;text-align: center;color: #e9849e !important;border: solid 1px #e9849e;padding-top: 30px;}

#latest_works          {display: flex;justify-content: space-between;align-items: flex-end;}
#latest_works .image   {width: 632px;}
#latest_works .text_box{width: 246px;color: #aeadad;}

#works_list         {color: #4d8e39;}
#works_list a       {color: #4d8e39;}
#notes_list         {color: #57aec9;}
#notes_list a       {color: #57aec9;}


/* about -------------------------------------------------------------- */
.about #cont_box  {width: 50%;margin: auto;}
.about .text_box  {letter-spacing: 0.1em;}
.about .name      {font-size: 18px;font-weight: 600;margin-bottom: 30px;}
.about .data      {width: 100%;padding-bottom: 50px;background-image: url(images/about/about_bg_pc.jpg);background-repeat: no-repeat;background-position: left bottom;}
.about .inner h3  {margin-bottom: 30px;font-family: "Roboto", sans-serif;font-size: 27px;font-weight: 300;font-style: italic;font-variation-settings: "wdth" 100;}

/* works -------------------------------------------------------------- */
.works .list_box  {width: 910px;margin: auto;}
.works .list_box a{color: #4d8e39;}

/* detail */
.works .detail #cont_box{width: 648px;margin: auto;}
.works .detail h3   {font-size: 14px;line-height: 180%;letter-spacing: 0.2em;margin-bottom: 20px;}
.works .detail .image   {margin-bottom: 30px;border: solid 1px #4d8e39;}
.works .detail .text    {width: 100%;margin: auto;letter-spacing: 0.1em;line-height: 200%;}
.works .detail .image_box{width: 100%;margin: auto;/* padding-top: 30px; */}
.works .detail .image_box .pict{margin-bottom: 20px;}
.works .detail .image_box img{width: 100%;}

/* notes -------------------------------------------------------------- */
.notes .list_box  {width: 910px;margin: auto;}
.notes .list_box a{color: #57aec9;}

/* detail */
.notes .detail #cont_box{width: 648px;margin: auto;}
.notes .detail .date    {font-size: 11px;line-height: 180%;letter-spacing: 0.2em;margin-bottom: 30px;}
.notes .detail .image   {margin-bottom: 30px;border: solid 1px #57aec9;}
.notes .detail .image img{width: 100%;}
.notes .detail .text    {width: 86%;margin: auto;}
.notes .detail .content img{width: 100%;}
.notes .detail .content p{margin-bottom: 20px;line-height: 180%;letter-spacing: 0.2em;font-size: 12px;}

/* contact --------------------------------------------------------------------------------------------------------------------- */
#contact             {background: #f4f0ea;}
#contact .cont_body  {width: 500px;margin: auto;padding: 100px 0 0;}

#contact input,
#contact button,
#contact select,
#contact textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  margin: 0;
}

#contact textarea {
  resize: vertical;
}

#contact input[type='checkbox'],
#contact input[type='radio'] {
  display: none;
}

#contact input[type='submit'],
#contact input[type='button'],
#contact label,
#contact button,
#contact select {
  cursor: pointer;
}

#contact select::-ms-expand {
  display: none;
}


#contact .form_box          {}
#contact .form_box ul       {width: 100%;height: auto;margin: 0 0 50px;display: block;}
#contact .form_box ul::after{content: "";height: 0;display: block;visibility: hidden;clear: both;}
#contact .form_box li       {width: 100%;margin: 0 0 20px;padding: 10px 0;border-bottom: solid 3px #605f5f;font-size: 18px}
#contact input[type='text'],
#contact textarea           {width: 100%;}
::placeholder               {font-size: 18px;color: #888;line-height: 150%;font-family: HelveticaLTPro-Roman, "Noto Sans JP", sans-serif;}

#contact .send_btn          {width: 30px;height: 16px;display: block;float: right;}
#contact .send_btn input    {width: 100%;height: 100%;text-indent: -9999px;background: url(images/send_btn.png) no-repeat left top;}

/*
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder,textarea:focus::-moz-placeholder                   {color: transparent;}
input:focus::-ms-input-placeholder,textarea:focus::-ms-input-placeholder         {color: transparent;}
input:focus::placeholder,textarea:focus::placeholder                             {color: transparent;}
*/

.mw_wp_form_complete .text_box  {/* text-align: center; */ font-family: HelveticaNeueLTPro-Md, "Noto Sans JP", sans-serif;}
.mw_wp_form_complete .textM     {margin: 0 0 20px;font-size: 20px;letter-spacing: 0.03em;}
.mw_wp_form_complete .text      {font-size: 12px;letter-spacing: 0.05em;line-height: 190%;}

/* wp-pagenavi */
.wp-pagenavi              {text-align: right;padding: 0 30px 30px 30px;}
.wp-pagenavi a            {color: #5a5a5a;text-decoration: none;font-family: HelveticaLTPro-Roman;}

.wp-pagenavi a.page             {margin: 0 7px;}
.wp-pagenavi a.previouspostslink{margin: 0 17px 0 0;padding: 0;text-decoration: none;border-bottom: solid 1px #5a5a5a;}
.wp-pagenavi a.nextpostslink    {margin: 0 0 0 17px;padding: 0;text-decoration: none;border-bottom: solid 1px #5a5a5a;}

/*----- SP ------------------------------------------------------------------------------------------ */
@media screen and (max-width: 787px) {
.pc{display: none;}
.sp{display: block;}

/* nav */
.fat-nav .logo    {width: 80%;height: auto;left: 50%;top: 50%;transform: translate(-50%, -50%);}

/* footer */
#footer         {width: 100%;height: auto;padding: 50px 0;}
#foot_nav li    {display: block;padding: 0;font-size: 14px;margin: 0 0 30px;}


/* home */
.text                  {font-size: 11px;}
#stage .logo-box       {width: 72%;height: auto;left: 50%;top: 50%;transform: translate(-50%, -50%);}
/*
#stage .shizuku        {left: 16%;top: 0;width: 18%;height: auto;}
*/
#wrapper               {width: 100%;}
.home #cont_box        {width: 100%;margin: auto;padding-top: 24px;}
.list_box              {display: block;width: 80%;margin: auto;}
.list_box .item        {margin-bottom: 40px;width: 100%;}
.list .btn a           {width: 180px;height: 50px;padding-top: 14px;}
#latest_works          {display: block;width: 90%;float: right;}
#latest_works .image   {width: 100%;margin-bottom: 30px;}
#latest_works .text_box{width: 90%;}
#wrapper #id      {width: 84px;height: auto;}
#wrapper h2       {font-size: 18px;}

/* about */
.about #cont_box  {width: 80%;margin: auto;}
.about .name      {font-size: 14px;}
.about .data      {padding-bottom: 20px;background-image: url(images/about/about_bg_sp.jpg);background-size: contain;}
.about .inner h3  {margin-bottom: 20px;font-size: 20px;}

/* works -------------------------------------------------------------- */
.works .list_box  {width: 80%;}
/* detail */
.works .detail #cont_box{width: 80%;}
.works .detail h3       {font-size: 12px;}

/* notes -------------------------------------------------------------- */
.notes .list_box  {width: 80%;}
/* detail */
.notes .detail #cont_box{width: 80%;}
.notes .detail .content p{margin-bottom: 10px;font-size: 11px;}

/* contact --------------------------------------------------------------------------------------------------------------------- */
#contact .cont_body  {width: 72%;margin: auto;padding: 65px 0 0;}

#contact .form_box          {}
#contact .form_box ul       {margin: 0 0 30px;}
#contact .form_box li       {width: 100%;margin: 0 0 20px;padding: 4px 0;border-bottom: solid 2px #605f5f;font-size: 15px;}
#contact input[type='text'],
#contact textarea           {}
::placeholder               {font-size: 15px;}

#contact .send_btn          {width: 15px;height: 8px;}
#contact .send_btn input    {background-size: cover;}

.mw_wp_form_complete .textM     {margin: 0 0 20px;font-size: 17px;letter-spacing: 0.01em;}
.mw_wp_form_complete .text      {font-size: 11px;line-height: 200%;}

/* wp-pagenavi */
.wp-pagenavi a                  {font-size: 12px;}
.wp-pagenavi a.page             {margin: 0 7px;font-size: 14px;}
.wp-pagenavi a.previouspostslink{}
.wp-pagenavi a.nextpostslink    {}

}