@charset "utf-8";

/*---------- top-page ----------*/
/*slider*/
.slider{
  width: 100%;
  margin: 0 auto 70px;
}
.list {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 66.7%;
  margin: 0 auto;
}
.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.current {
  opacity: 1;
}
.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*---------- banner ----------*/
.bnr_box {
  display: flex;
  width: 100%;
}
.top_bnr img, .bnr img { display: none; }
.top_bnr, .bnr {
  width: 100%;
  height: 500px;
  margin: 0 0 70px;
}
.bnr { margin: 0; }
.top_bnr a, .bnr a {
	display: block;
	width: 960px;
	height: 500px;
	margin: 0 auto;
}
.bnr a { width: 100%; }
.top_bnr_p, .bnr_title, .bnr_p {
	display: block;
	margin: 0 auto;
	padding-top: 260px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	transition: 0.3s;
}
.bnr_title, .bnr_p {
  padding-top: 180px;
  letter-spacing: .1em;
}
.bnr_p {
  padding-top: 10px;
  transition: 0.3s;
  letter-spacing: 0;
}
.top_bnr a:hover .top_bnr_p, .bnr a:hover .bnr_p {
  letter-spacing: 0.3em;
  transition: 0.3s;
}
.top_bnr01 {
	background: url(../img/top_bnr_bg01.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_bg.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_paralla01.jpg) no-repeat center center / cover fixed;
}
.top_bnr02 {
	background: url(../img/top_bnr_bg02.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_bg.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_paralla02.jpg) no-repeat center center / cover fixed;
}
.top_bnr03 {
	margin-bottom: 0;
	background: url(../img/top_bnr_bg03.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_bg.png) no-repeat center top / auto scroll,
		url(../img/top_bnr_paralla03.jpg) no-repeat center center / cover fixed;
}
.bnr01 {
  background: url(../img/bnr_bg01.jpg) no-repeat center top;
}
.bnr02 {
  background: url(../img/bnr_bg02.jpg) no-repeat center top;
}
.bnr03 {
  background: url(../img/bnr_bg03.jpg) no-repeat center top;
}



/*---------- profile ----------*/
.tdbox_inner { margin-bottom: 70px; }

.skill_card {
  width: 220px;
  margin-bottom: 30px;
  padding: 30px 20px;
  text-align: center;
  border: 2px solid #919191;
}
.skill_img {
  width: 150px;
  margin: 0 auto 20px;
}
.skill_title {
  margin-bottom: 10px;
  font-size: 1.5em;
  font-weight: bold;
}

table {
  width: 100%;
  margin: 0 auto 50px;
  padding: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
td, th {
  padding: 10px;
  border-collapse: collapse;
}
table tr {
  background-color: #f6f5f3;
  border-bottom: 2px solid #fff;
}
table th,
table td {
  border-right: 2px solid #fff;
}
table thead tr {
  background-color: #919191;
  color:#fff;
}
table tbody th {
  background-color: #acbbb6;
  color: #fff;
}
.non{
  background:#fff
}
.tr_center {
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.col15 { width: 15%; }
.col20 { width: 20%; }
.col25 { width: 25%; }
.col40 { width: 40%; }
.col50 { width: 50%; }
.col60 { width: 60%; }

table ul {
  padding-left: 25px;
}
table ul li {
  padding-bottom: 10px;
}


/*---------- portfolio ----------*/
#portfolio .content_box {
  padding-bottom: 0;
}

.text-btn a {
  font-weight: bold;
  padding: 0 0.7em;
}
.text-btn a:hover {
  opacity: 0.7;
}


/*---------- button ----------*/
.site_btn {
  display: inline-block;
  padding: 0.5em 2em;
  color: #acbbb6;
  font-weight: bold;
  border: solid 2px #acbbb6;
  transition: .3s;
}
.site_btn:hover {
  background: #acbbb6;
  color: #fff;
}

.page_link_btn {
  width: 100%;
  text-align: center;
}
.page_link_btn a {
  margin: 0 1vw;
}


/* ポップアップウインドウの設定 */
.popup {
  display: none;
  margin: auto;
  width: 70vw;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow-y: scroll;
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
}
/* チェックボックスの初期設定 */
#popup-on {
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}

/* 閉じるアイコン（右上） */
.icon-close{
  background: #000;
  color: #fff;
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}

/* 閉じるボタン */
.btn-close{
  background: #000;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  width: 95%;
  text-align: center;
}

/* 開くボタン */
.btn-open{
  background: #fff;
  cursor: pointer;
  width: 100%;
}
#portfolio .popup-block { display: inline-block; }
#portfolio .popup-btn {
  display: inline-block;
  padding: 0.5em 2em;
  color: #acbbb6;
  font-weight: bold;
  border: solid 2px #acbbb6;
  transition: .3s;
}
#portfolio .popup-btn:hover {
  background: #acbbb6;
  color: #fff;
}



/* ポップアップの内容 */
.popup-content{
  margin: 40px auto 40px auto;
  width: 90%;
}
.popup-content img {
  display: block;
  width: 80%;
  margin: 0 auto;
}






/*---------- レスポンシブ ----------*/

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

  /*---------- banner ----------*/
  .top_bnr a, .bnr a { width: 100%; }

}/*1200*/


@media screen and (max-width: 768px){
/*タブレット用*/

    /*---------- top-page ----------*/
    .slider {
    	min-width: 100%;
    	max-width: 100%;
    	margin: 0 auto 5vw;
    }

    /*---------- banner ----------*/
    .top_bnr_p, .bnr_title, .bnr_p { display: none; }
    .top_bnr img, .bnr img {
    	display: block;
    	width: 100%;
    	height: auto;
    }
    .top_bnr, .bnr {
    	width: 100%;
    	height: auto;
    	margin-bottom: 8vw;
    	background: none transparent;
    }
    .bnr { margin-bottom: 0; }
    .top_bnr a, .bnr a {
    	width: 100%;
    	height: auto;
    }
    .top_bnr03 {
    	margin-bottom: 0;
    }

    .bnr_box { display: block; }
    .bnr02 { display: none; }

    /*---------- profile ----------*/
    table {
      border: none;
      width: 100%;
      margin-bottom: 5vw;
    }
    table th {
      background-color: #777978;
      display: block;
      border-right: none;
    }
    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    table tr {
      display: block;
      margin-bottom: .7em;
    }
    table td {
      display: block;
      padding: 1em 1em 1em 10em;
      font-size: .8em;
      text-align: left;
      position: relative;
      border-right: none;
      border-bottom: 1px solid #bbb;
    }
    
    table td::before {
      content: attr(data-label);
      font-weight: bold;
      position: absolute;
      left: 20px;
      color: #777978;
    }
    table td:last-child {
      border-bottom: 0;
    }
    table tbody th {
      color: #fff;
    }
    table ul {
      padding-left: 25px;
    }
    table ul li {
      padding-bottom: 10px;
    }

    .tdbox_inner { margin-bottom: 5vw; }
    .tdbox_inner table td { padding-left: 11em; }

    .tdbox_inner table td::before { left: 15px; }

    #profile .content.box_04 .text {
      margin-bottom: 8vw;
    }


    /*---------- works ----------*/
    .list_flex {
      width: 100%;
      margin: 0 auto 5vw;
    }
    .flex_ul li {
      padding-bottom: 0.8em;
    }
    .li_title {
      font-size: 1em;
    }
    .site_btn {
    padding: 0.3em 1.6em;
    }

}/*768*/




@media screen and (max-width: 480px){
/*スマホ用*/

    /*---------- top-page ----------*/
    .slider {
    	margin-top: 50px;
    }
    .top_bnr {
    	margin-bottom: 11vw;
    }
    .top_bnr03 {
    	margin-bottom: 0;
    }


    /*---------- profile ----------*/
    table { margin-bottom: 3vw; }
    table ul {
        padding-left: 1.5em;
    }
    .tdbox_inner table td { padding-left: 9.5em; }

    .bnr { margin-bottom: 0; }

    .skill_card {
      width: 150px;
      padding: 20px 10px;
    }
    .skill_img {
      width: 100%;
    }

    
    /*---------- works ----------*/
    .list_flex {
      display: block;
      margin: 0 auto 7vw;
    }
    .list_img {
      width: 80%;
      margin: 0 auto 3vw;
    }
    .flex_ul {
      width: 80%;
      margin: 0 auto;
    }
    .flex_ul li {
      padding-bottom: 0.5em;
    }
    .li_title {
      font-size: 1em;
    }
    .site_btn {
      width: 100%;
      padding: 0.5em 1.6em;
      text-align: center;
    }

    .page_link_btn {
      width: 90%;
      margin: 0 auto;
    }
    .page_link_btn a {
      display: block;
      width: 100%;
      margin: 0 0 5vw;
    }
    .page_link {
      padding-top: 80px;
      margin-top: -80px;
    }

    /*---------- portfolio ----------*/
    /*ボタン*/
    #portfolio .popup-block { width: 100%; }
    #portfolio .popup-btn { text-align: center; }

    /*ポップアップウィンドウ*/
    .popup { width: 90vw; }
    .popup-content {
      width: 90%;
      margin: 16vw auto 7vw;
    }
    .popup-content img {
      width: 100%;
      margin: 0 auto;
    }

}/*480*/