@charset "utf-8";
/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

body {
  font: 14px/1.5 YuMincho、游明朝体, serif;
  font-weight: 200;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  color: #1a1a1a;
  background: rgba(242, 242, 242, 1.00);
}

/* ヘッダー
------------------------------------------------------------*/
header {
padding: 1em 0 1em 0;    
}
header img{
    object-fit: cover;
    width: 100%;
    height: auto; 
}

/* 共通
------------------------------------------------------------*/
h1 {display: none;}

p {font-size: 0.95em; line-height: 2;}

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

.inner {
    margin: 0 auto;
    width: 82%;
}
/* コンテナ */
#container {
    margin: 4em 0 5em 0;
    display: grid;
    grid-template-rows: 0.5fr 1fr 1fr 50px;/*行*/
    grid-template-columns: 1fr;/*列*/
    grid-template-areas: 
		"title" 
		"areaA" 
		"areaB" 
		"areaC";
}

/* アイテム */
#title {
    grid-area: title;
    /*background: #444; */
    vertical-align: middle;
}
#itemA {
    grid-area: areaA;
    /* background: #CCC;*/ 
}
#itemB {
    grid-area: areaB;
    /* background: #8f8; */
    padding: 0;
}
#itemB img{
    width: 100%;
    height:auto;
}
#itemC {
    grid-area: areaC;
	vertical-align:top;
    /* background: #88f; */
}

/*Flexbox*/
.f-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2em 0 5em 0;
  background: rgba(172, 172, 172, 1.00);
  color: rgba(255, 255, 255, 1.00);
  font-family: YuGothic, "Yu Gothic medium", "sans-serif";
  font-size: 1em;
  letter-spacing: 0em;
}
.contact {
  width: 35%;
  border-right: solid 2px rgba(186, 186, 186, 1.00);
  text-align: center;
  padding: 0.5em 0 0.5em 0;
}
.mail_add {
  width: 65%;
  text-align: center;
  padding: 0.5em 0 0.5em 0;
}


/* レスポンシブ設定
------------------------------------------------------------*/
@media only screen and (min-width: 800px) { /*800以上*/
.inner {
    margin: 0 auto;
    max-width: 1100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
 header {
  padding: 2em 0 2em 0; 
}
    header img{
    object-fit: cover;
}
	
p {font-size: 1em; line-height: 2;}
	
#container {
    height: 300px;
    margin: 5em 0 5em 0;
    display: grid;
    grid-template-rows: 0.4fr 1fr 1fr; /*行*/
    grid-template-columns: 1fr 1.3fr; /*列*/
    grid-template-areas: 
		"title title" 
		"areaA areaB" 
		"areaC areaB";
}

#itemB {/*名刺*/
    padding: 2em 0 0 0;
    text-align: right;
}
#itemB img{
    width: 90%;
    height:auto;
}
/*Flexbox*/
.f-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2em 0 5em 0;
  background: rgba(172, 172, 172, 1.00);
  color: rgba(255, 255, 255, 1.00);
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-size: 1em;
  letter-spacing: 0.4em;
}
.contact {
  width: 35%;
  border-right: solid 2px rgba(186, 186, 186, 1.00);
  text-align: center;
  padding: 0.5em 0 0.5em 0;
}
.mail_add {
  width: 65%;
  text-align: center;
  padding: 0.5em 0 0.5em 0;
}
}