@charset "UTF-8";
/* ================================================ 
 * base
/* ================================================*/
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 2.25;
  color: #000000;
  font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','ＭＳ ゴシック',sans-serif;
}

img {
  max-width: 100%;
}

ul, li, ol {
  list-style: none;
}

a {
  color: #222222;
  -webkit-transition: all .3s;
  transition: all .3s;
}

a:hover {
  opacity: 0.7;
}

h1{
  font-size: 5.6rem;
  line-height: 1.17;
  font-weight: normal;
  color: #fff;
  font-family: 'Oleo Script Swash Caps', cursive;
}

h3 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}

/* ================================================
 * common
================================================*/
/* header
---------------------*/
.sitelogo {
  padding: 1em 0;
  font-size: 3.2rem;
  line-height: 0.7;
  font-family: 'Oleo Script Swash Caps', cursive;
}

.globalnav-list {
  padding: 1em;
  font-size: 1.8rem;
  font-family: 'Raleway', sans-serif;
}

.globalnav-list li {
  padding: 1em 0;
}

.globalnav-list li a {
  display: block;
  color: #4A687A;
  font-weight: bold;
  font-size: 1.4rem;
  position: relative;
}

.globalnav-list li a:hover {
  color: #7BAECC;
}

.globalnav-list li a:hover::after {
  content: '';
  width: 150%;
  height: 2px;
  background: #7BAECC;
  display: block;
  position: absolute;
  top: calc(50% + 1em);
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.globalnav-list li:not(:first-child) {
  margin-left: 40px;
}

.drawer-hamburger {
  width: 4rem;
  padding: 50px 3em;
}

@media screen and (min-width: 685px) {
  .drawer-hamburger {
    display: none;
  }
  .drawer--right .drawer-nav {
    right: 0;
    position: static;
    width: auto;
  }
}

/***********************************
  footer section
************************************/
.footer {
  text-align: center;
}

.copyright {
  font-size: 1.2rem;
  background-color: #82e3f0;
}

.btn-pagetop {
  width: 45px;
  height: 45px;
  position: fixed;
  border-radius: 50%;
  background: #f8f8f8;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  bottom: 1em;
  right: 1em;
}

.btn-pagetop a {
  display: block;
  position: relative;
  padding-top: 25px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.2rem;
  color: #222222;
  text-transform: uppercase;
}

.btn-pagetop a::before {
  content: '\f102';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  position: absolute;
  font-size: 2rem;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/* main
---------------------*/
.wrap {
  width: 1080px;
  max-width: 100%;
  margin: 0 auto;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex.-spacebetween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex.-aligncenter {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card {
  background: #ffffff;
  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  overflow: hidden;
}

.heading-primary {
  text-align: center;
  font-size: 4.8rem;
  font-family: 'Raleway', sans-serif;
}

.heading-primary + * {
  margin-top: 30px;
}

.heading-primary .ja {
  display: block;
  font-size: 0.45em;
  margin-top: -4px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: normal;
  font-family: YuGothic,'Yu Gothic',serif;
}

/***********************************
  main section
************************************/
.main-box {
  position: relative;
}

.main-logo-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}
.main-logo{
  margin-bottom: 50px;
  width: 140px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.main-logo-box p {
  font-size: 2.4rem;
  line-height: 0.5;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  margin-top: 30px;
  text-align: center;
}

.slick-next,.slick-prev{
  display: none;
}

/***********************************
  about section
************************************/
.about {
  padding: 50px 0;
}

.about-box h2{
  text-align: left;
}

.about-box figure {
  flex-basis: 60%;
  margin-right: 30px;
  align-self: center;
}

.about-box .about-text {
  flex-basis: 40%;
}

/***********************************
  skills section
************************************/
.skills {
  padding: 50px 0;
}

.skill-box {
  flex-basis: 33%;
  margin: 20px 30px;
}

.skill-img figure {
  text-align: center;
}

.skill-img figure img{
  max-width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.skill-text p{
  text-align: left;
}

/***********************************
  works section
************************************/
.works {
  background-color: #eee;
  padding: 80px 0;
}

/*
|
|
|
|
/////////////////////////////////////////////

 card

///////////////////////////////////////////*/
	.layout--3{
    display : flex ;
		flex-direction : row ;/*横並び*/
		justify-content : space-between ;
		flex-wrap : wrap ;
	}
  
.card{
	display : block ;
	width : 100% ;
	margin : 0 0 40px 0 ;
	padding : 24px ;
	box-sizing : border-box ;
	text-decoration : none ;
	color : var(--text) ;
	background : #fff ;
}
.card:last-child{
	margin : 0 ;
}
.card__image{
	width : 100% ;
	vertical-align : bottom ;/*画像の下の変な隙間をなくす*/
}
.card__title{
	width : 100% ;
	margin : 16px 0 ;
}
.card__desc{
	width : 100% ;
	margin : 0 ;
}
	.layout--3 .card{
		width : calc( ( 100% - 40px * 2 ) / 3 ) ;
		margin : 0 ;
	}

	.layout--3 .card:nth-child( n + 4 ){
		margin : 40px 0 0 0 ;
	}

	/*hover*/
	.card{
		transition : .5s ;
	}
	.card:hover{
		box-shadow : 12px 12px 20px rgba(0,0,0,.3);
	}


/***********************************
  profile section
************************************/
.profile {
  padding: 50px 0;
}

.profile-box {
  padding: 20px 0;
}

.profile-img {
  flex-basis: 20%;
}

.profile-img figure {
  text-align: center;
}

.profile-text {
  flex-basis: 40%;
  margin: 0 30px;
}

.profile-text h3 {
  text-align: left;
}

/***********************************
  contact section
************************************/
.contact {
  background-color: #eee;
  padding: 100px 0;
}

.contact-box {
  margin: 0 auto;
  padding-top: 60px;
}

.contact-box .contact-text{
  text-align: center;
}

.contact .contactform {
  width: 550px;
  margin: 40px auto;
}

.contact .contactform-list .flex + * {
  margin-top: 1em;
}

.contact .contactform-list dt {
  width: 30%;
}

.contact .contactform-list dd {
  width: 70%;
}

.contact .formparts {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  border: none;
  border: 1px solid #fff;
  padding: 0.5em;
  font-size: 1.6rem;
  outline: none;
  border-radius: 4px;
}

.contact .formparts:focus {
  -webkit-box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
          box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
}

.contact .formparts.-textarea {
  resize: vertical;
}

.contact .btn-submit {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 240px;
  height: 60px;
  margin: 40px auto;
  font-size: 1.6rem;
  font-weight: bold;
  background: #000;
  padding: .5em 0;
  color: #ffffff;
  border-radius: 4px;
  position: relative;
  border: 2px solid transparent;/* 透明の枠 */
}

.contact .btn-submit:focus {
  -webkit-box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
          box-shadow: 0 0 4px rgba(123, 174, 204, 0.5);
}

/* 反転 */
.contact .btn-submit:hover {
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
}

.contact .btn-submit:hover::after {
  color: #000;
}

.contact .thanks {
  text-align: center;
}

/*
 * responsive - tab
================================================*/
@media screen and (max-width: 1024px) {
  /* common */
  .wrap {
    padding: 0 15px;
  }
  .wrap.-wide {
    padding: 0;
  }

  .sp_br {
    display: none;
  }

  .globalnav-list {
    padding: 0.5em;
  }

  .globalnav-list li:first-child {
    margin-left: 20px;
  }

  .globalnav-list li:not(:first-child) {
    margin-left: 20px;
  }

  .main-logo {
    display: none;
  }

  .main-logo-box h1 {
    text-align: center;
  }

  .contact .contactform {
    width: 100%;
    padding: 0 15px;
  }
}

/*
 * responsive - sp
================================================*/
@media screen and (max-width: 685px) {
  /* common */
  .header {
    padding: 20px 0;
  }

  .flex.-spBlock {
    display: block;
  }

  .main-logo-box h1 {
    font-size: 10.0vw;
}

.main-logo-box p {
  font-size: 5.0vw;
}

  .about-box h2 {
    text-align: center;
  }
  .about-box figure {
    flex-basis: 100%;
    margin: 0;
}

  .works {
    margin-top: 50px;
  }
.layout--3{
	display : flex ;
	flex-direction : column ;/*縦並び*/
	width : 100% ;
}
	.layout--3 .card{
		width : 100%;
		margin : 0 0 40px 0 ;
	}

  .contact-box .contact-text {
    text-align: left;
  }
  .contact .contactform-list dt, .contact .contactform-list dd {
    width: 100%;
  }
  .contact .contactform-list dd {
    margin-top: 8px;
  }
}