@charset "UTF-8";
/*@font-face{ font-family: "Hannari"; src: url("../fonts/Hannari.otf"); }*/
/*@font-face{ font-family: "Kokoro"; src: url("../fonts/Kokoro.otf"); }*/


/*base
----------------------------------*/
html {
  min-width: 320px;
  font-size: 62.5%;
}
body {
  margin: 0;
  /*background: #fff;*/background-image:url(../images/pattern13.png);
  color: #333;
  border-top: 6px solid #2e6a87;
  line-height: 1.5;
  font-size: 16px;
  font-size: 1.6rem;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

/*botton*/
.btn {
  display: inline-block;
  padding: 5px 23px;
  border: 1px #ccc solid;
  background: #fff;
  color: #333;
  text-decoration: none;
}
.btn:hover {
  background: #f0f0f0;
}

.btn2 {
  display: inline-block;
  padding: 5px 23px;
  border: 1px #ccc solid;
  background: #fff;
  color: #333;
  text-decoration: none;
}
.btn2:hover {
  border: 1px #ccc solid;
  color: #fff;
  background: #ccc;
}
.btnBlue2 {
  background: #2e6a87;
  color: #fff;
}
.btnBlue2:hover {
  color: #2e4c87;
  background: #fff;
}

/*clearfix*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*footer*/
footer { 
  padding: 18px 0 16px;
  background: #2e6a87;
  color: #fff;
  text-align: center;
}

/*layout
----------------------------------*/
#wrapper { position: relative;}

#facebook{ position:absolute; top:0; right:20px; width:30px; height:30px;}

#facebook img{ opacity:1;}
#facebook img:hover{ opacity:0.5;}


#main { padding-bottom: 100px;}

header, #main { margin: 0 20px;}

#main h2{ border-bottom:3px solid #2e6a87; margin-bottom: 0.6em;/* padding-top: 3em;*/}

/*#main h2{ display:inline-block; background: #f0f0f0; padding: 0 10px;}*/
#main h3{ display:inline-block; border-left:6px solid #e08a3a; padding: 0 6px;}

h1 { font-size: 20px; font-size: 2.0rem;}
h2 { font-size: 20px; font-size: 2.0rem; white-space:nowrap;}
h3 { font-size: 18px; font-size: 1.8rem;}
p{ font-size:14px; font-size:1.4rem;}


#sliderContainer{ margin-bottom:3em;}
.content{ margin-bottom:3em;}

#sliderContainer a{ font-size:14px; font-size:1.4rem;}
#globalNav li a{ font-size:14px; font-size:1.4rem;}

.more{ text-align:right;}
.more a{ font-size:14px; font-size:1.4rem; margin-left:2px;}

#career{margin-bottom:40px;}

/*strong{ color:#fe7363;}*/

/*header h1 { font-family: 'Kokoro'; font-size: 30px; font-size: 3.0rem; letter-spacing: 0.4em;}*/

/*globalNav*/
#globalNav {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  margin: 0;
  margin-left: -50%;
  padding: 0;
}
#globalNav li {
  display: block;
  float: left;
  width: 50%;
}
#globalNav li a {
  display: block;
  padding: 10px 0;
  border-top: 1px #ccc solid;
  background: #fff;
  color: #333;
  text-decoration: none;
  text-align:center;
}

#globalNav li a { border-right:  1px #ccc solid;}
#globalNav li:nth-child(even) a { border-right: none;}

#pageTop{ display:none;}
#ac_index{ display:none;}

#work section img{ box-shadow:1px 1px 1px #aaa;}
#work section img:hover{ opacity:0.7;}

#work section{ margin-bottom:60px;}
#work section:last-child{ margin-bottom:0;}

.detail-section{ margin:0 0 60px 0;}
.left { margin: 0 0 30px 0;}
.mid_3 { text-align: center;}
.mid_3 img { transform: scale(0.7,0.7);}

#career img{display:block; margin:0 auto;}


#back{ text-align:left; padding-left:20px;}
#back a{ text-decoration:none; color:#454545;}

.detail{ text-align:center; margin: 40px 20px;}

/*section color*/
/*#main section:nth-child(4n+1){ background-color:#FF9;}
#main section:nth-child(4n+2){ background-color:#Fa9;}
#main section:nth-child(4n+3){ background-color:#2F9;}
#main section:nth-child(4n+4){ background-color:#9F9;}*/

/*#main{ background-color:#FF9;}
#skill{ background-color:#Fa9;}
#school{ background-color:#2F9;}
#career{ background-color:#9F9;}*/


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 37.5em) {
header, #main { margin: 0 40px;}

#facebook{ top:0; right:40px; width:36px; height:36px;}

h1 { font-size: 24px; font-size: 2.4rem;}
h2 { font-size: 24px; font-size: 2.4rem;}
h3 { font-size: 20px; font-size: 2.0rem;}
p{ font-size:16px; font-size:1.6rem;}

/*work-float*/
/* .content .inner img { float: left; width: 36%; margin: 0 2em 2em 0;} */
/*.content .inner img { float: left; width: 47.826%; margin: 0 1.4em 1.4em 0;}*/

/*.content section:nth-child(even) .inner img { float: right; width: 36%; margin: 0 0 2em 2em;}*/

.content .inner {display: flex; justify-content: space-between}
.content .inner .img_box {width: 40%}
.content .inner .txt_box {width: 56%}

/*detail-float*/
.left { float: left; width: 46%; margin: 0;}
.right { float: right; width: 46%; margin: 0;}
.mt20m { margin-top: -2.0rem;}

.left_3 { float: left; width: 42%; margin: 0;}
.mid_3 { float: left; width: 14%;  margin: 40px 1%;}
.mid_3 img { transform: rotate(90deg) scale(0.6,0.6);}
.right_3 { float: right; width: 42%; margin: 0;}
}



@media only screen and (min-width:  46em) {
/*content-float*/
/*#main .content section { float: left; width: 47.826%; margin-right: 4.3478%;}*/
/*#main .content section:nth-child(even) { margin-right: 0;}*/
.mid_3 img { transform: rotate(90deg) scale(0.8,0.8);}

}

@media only screen and (min-width: 60em) {
#wrapper { width: 960px; margin: 0 auto;}

#facebook{ top:2px; right:0;}

/*h1 { font-size: 28px; font-size: 2.8rem;}
h2 { font-size: 24px; font-size: 2.4rem;}
h3 { font-size: 20px; font-size: 2.0rem;}
p{ font-size:18px; font-size:1.8rem;}*/

#sliderContainer a{ font-size: 16px; font-size: 1.6rem;}
.more a{ font-size: 16px; font-size: 1.6rem;}

section{ margin-bottom:30px;}

.detail-section{ margin:30px 0 60px 0;}
.mid_3 img { transform: rotate(90deg) scale(1.0,1.0);}

#career{margin-bottom:0;}

/*globalNav*/
header { position:relative;}

#globalNav {
  right: 0;
  left: auto;
  bottom: 0;
  width: 51.8%;
  margin: 0;
  display: flex;
  justify-content: flex-end;
}
#globalNav li {
  display: inline-block;
  float: left;
  width: 20%;
}
#globalNav li a {
  border-top: none;
  background: none;
  font-size: 16px; font-size: 1.6rem;
  padding: 0;
}

#globalNav li a { border-right: none;}


#pageTop{ display:block; text-align:right; padding-top:40px; margin:0;}
#pageTop a{ text-decoration:none; color:#454545;}

#ac_index{ display:inline; text-align:left;}
#ac_index a{ text-decoration:none; color:#454545;}

#back{ padding-left:0;}

#detailwrap { width: 900px; margin: 0 auto;}

}