/*PC、スマホ共通スタイル*/
* {
    box-sizing: border-box;
    /*box-sizingを使うと要素のサイズ指定の際にpaddingとborderが自動で考慮されます。コンテナ内で要素を正確に配置するのに役立ちます。
    全ての要素に指定するのがおすすめ。*/
}

P {
  font-size: 15px;
}

/*見出し*/
h2 {
    margin-top: 40px;
}

h2::after {
    content: url(images/line-green.png) ;
    margin-left: 10px;
}

 h3 {
   font-size: 27px;
 }

 .nav-title {
    font-weight: bold;
    color: #007881;
    font-size: 40px;
 }

 /* 全体 */
body {
    max-width: 1080px;
    margin:0 auto 0 auto;
    font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
}

/*ヘッダー*/
header {
    display: flex;
    justify-content: space-between;
}

header > a > img {
    padding: 5px 0 0 10px;
}

#nav-pc {
    font-size: 20px;
}

#nav-pc ul {
    display: flex; 
    padding-left: 0px;
    margin-block-start: 1.7em;
    margin-block-end: 0.3em;
}

#nav-pc li {
    list-style: none;
}

/* ナビゲーションのリンクの装飾設定 */
#nav-pc a {
    text-decoration: none;
    margin-left: 20px;
    color: #0d0d0d;
}

#nav-pc a:hover {
    text-decoration: underline;
}

/*メインビジュアル*/
#main-visual {
    position: relative;/*position: absolute;を指定するので、基準の親要素にするための設定*/
    height: 388px;
}


#main-message {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0fc9b0;
    color: #ffffff;
    border-radius: 0 0 476px 0; /*要素の角を丸くする「左上 右上 右下 左下」の順で指定*/
    max-width: 500px;
    width: 100%;
    height: 100%;
    z-index: 11;
}

#main-message h1 {
    font-size: 60px;
    margin: 100px 0 0 40px;
}

#main-message p {
    font-size: 28px;
    margin: 0 0 0 50px;
}

#main-visual img {
    max-width: 700px;
    border-radius: 300px 0 0 0;
    position: absolute;
    top: 0;
    right: 0;
    Z-index: 10;
}

/*ミッション*/
#mission {
    margin: 80px auto 80px auto;
}

#mission-flex {
    display: flex;
}

#mission-flex > div {
    width: 50%;
    margin: 20px;
}

#mission-photo {
    width: 100%;
}

#sdgs {
    margin-top: 150px;
    width: 100%;
}

/*プロダクト*/
#product {
    background-color: #fafafa;
    margin: 80px 0 80px 0;
    padding: 10px 40px 0px 40px;
}

/* 外枠 */
#product .product-flex {
    margin-top: 40px;
    display: flex; 
}

/* 左のカラム */
#product-left {
    width: 50%;
    margin-right: 20px;
}

/* 右のカラム */
#product-right {
    width: 50%;
    margin-right: 20px;
    margin-top: 80px;
}

/* 画像＋説明の枠 */
#product-left > div {
    position: relative;
    height: 480px;
    margin-right: 20px;
}

#product-right > div {
    position: relative;
    height: 480px;
    margin-left: 20px;
}

/* 画像*/
.product-photo {
    border: 2px solid #6BCAAE ;
    padding: 20px;
    width: 100%;
}

 /* 説明文の枠 */
.product-explain {
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: 50px;
    margin: 0 40px 0 40px;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
}

 /* 説明文の英語 */
.product-explain > span {
    color: #007881;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
}

 /* 説明文の見出し*/
.product-explain > h3 {
    margin: 5px 0 5px 0;
}

 /* 説明文*/
.product-explain > p {
    font-size: 14px;
    margin: 0;
}

#product-more {
    text-align: center;
}

#product-more a {
    position: relative;
    bottom: -42px;
}

/*About Us*/
#aboutus {
    margin: 80px auto 80px auto;
}

#aboutus > div {
    display: flex;
}

.cluture-img {
    width: 70%;
    align-self: flex-start;
}

.culture-img1 {
    margin-top: 25px;
    width: 50%;
}

/* 下の画像*/
#culture-img2-color {
    margin-top: 50px;
    background-color: #6BCAAE;
    border-radius: 0 0 200px 0;
}
.culture-img2 {
    width: 900px;
}



/* 3つの組織文化の表 */
#culture {
    display: flex;
    justify-content: space-between;
}

.culture-table {
    margin-right: 35px;
}

.culture-num {
    border-left: 3px solid #8ddbc4; /* 左側の実線 */
    border-bottom: 3px solid #8ddbc4;  /* 上側の実線 */
    height: 90px;
    width: 90px;
    font-size: 80px;
    text-align: center;
    color: #007881;
    margin: 0 20px 0 0;
    background-color: #ffffff;
}

.culture-table th {
    width: 400px;
    padding: 0 0 0 40px;
    text-align: left;
    font-size: 28px;
    font-weight: bold;
}

.culture-en {
    margin: 0;
    color: #007881;
    font-size: 24px;
}

.culture-description {
    margin: 0;
    padding: 0 0 20px 40px;
}


/* vision */
#vision {
    margin: 80px auto 80px auto;
}

/* セクション内の外枠*/
#vision > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*7つの行動指針の枠*/
.vision-box {
    width: 350px;
    height: 350px;
    margin-bottom: 30px;
    position: relative;
}

/*7つの行動指針の画像*/
.vision-box > img {
    width: 100%;
    position: relative;
    z-index: 30;
}

/*見出しと説明文をグループ化するspan要素*/
.vision-box > div {
    position: absolute;
    top: 0;
    left: 0;
    Z-index: 31;
    margin-right: 20px;
}

/*英語の見出し*/
.vision-box > div > h4 {
    color: #007881;
    font-size: 19px;
    margin: 80px 0 0 0;
}

/*h4の1文字め*/
.vision-box > div > h4::first-letter {
    font-size: 40px;
}

/*日本語の見出し*/
.vision-box > div > h5 {
    font-size: 20px;
    margin: 0 0 0 0;
}

/* 説明文 */
.vision-box > div > p {
    margin: 10px 30px 0 0;
}


/* コンタクト */
/* section要素 */
#company {
    margin: 80px auto 80px auto;
}

/* 表全体*/
#company-table {
    width: 100%;
}

/* 2行目以降の見出し */
.tableheader {
    text-align: left;
    padding: 20px;
    border-bottom-color: #007881;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    width: 100px;
}

/* 1行目の見出し */
.tableheader-first {
    border-top-color: #007881;
    border-top-width: 1px;
    border-top-style: solid;
}

/* セル */
.cell {
    padding: 30px;
    border-bottom-color: #ececec;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

/* 1行目のセル */
.cell-first {
    border-top-color: #ececec;
    border-top-width: 1px;
    border-top-style: solid;
}



/* contact */
#contact {
    margin: 80px auto 80px auto;
}

#contact > form >div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.contact-heading {
    width: 240px;
    align-self: center;
}

.contact-label {
    font-weight: bold;
}

.contact-span {
    color: #ce2222;
    margin: 0 0 0 20px;
    font-weight: bold;
}

.contact-textbox {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    border-style: solid;
    background-color: #fafafa;
    width: 400px;
    height: 56px;
}

/* お問い合わせ内容のテキストエリア */
.contact-textarea {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom-width: 1px;
  border-bottom-color: #707070;
  background-color: #fafafa;
  width: 400px;
  height: 200px;
}

 /* 個人情報の取り扱い */
 #contact dt {
   font-weight: bold;
 }
 
 #contact dd {
   margin: 0 0 16px 0;
 }
 
 #contact dd p {
   margin: 0;
 }
 
 #contact dd ul {
   padding-left: 0;
 }
 
 #contact dd li {
   margin-bottom: 0;
   list-style: none;
 }

 /* フッター */
 
 footer {
    background-color: #2F7578;
    text-align: center;
    padding: 80px 80px 30px 80px;
 }

 #footer-logo {
    margin-bottom: 30px;
 }


 #footer-link {
    margin-bottom: 50px;
 }

#footer-link > a {
    text-decoration: none;
    margin: 10px;
    color: #ffffff;
}

#footer-link > a:hover {
    text-decoration: underline;
}

#sns-footer {
    display: flex;
    justify-content: center;
    text-align: left;  /* ディスプレイが狭まったとき左揃え設定だと見栄えがいいから */
}

#sns-footer a {
    margin: 0 30px 0 0;
}

#copyright {
    color: #ffffff;
    margin: 0;
}