@charset "utf-8


/* 基準値
�指�
*/
:root {
  font-size: 15px;
}

body {
  font-family: sans-serif;
}

a {
  color: #257a01;
  text-decoration: none;
}

a img {
  border: none;
}

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

p {
  text-align: justify;
}


/* Header */

.Header {
  display: inline;
  background-color: #fff;
  padding: 1.5rem 2rem;
}

.Header a {
  color: #45c80d;
}

.Header a:hover {
  color: #ff0000;
}

.Header_Logo {
  line-height: 5;
  margin-bottom: 1rem;
}

ul {
    display: flex;
    flex-wrap: nowrap;
    list-style-type: none;
    list-style-position: outside;
    margin: 0;
    padding: 0.5rem;
    background-color: #FFF;
}

li {
    margin: 0 1rem 0 0;
    text-align: center;
    text-transform: uppercase;
    background-color: #fff;
    flex-basis: 25%;
    position: relative;
}

li:last-child { margin-right: 0;}

li:hover .second-level { visibility: visible; }

.second-level {
    width: 100%;
    visibility: hidden;
    flex-direction: column;
    position: absolute;
    padding: 0;
    top: 3.5rem;
}

.second-level li {
    margin: 0 0 0.1rem 0;
    background-color: #21D4FD;
}


/* ナビゲーショ�
メニュー
�スタ�
ル 

.Header_NavItems {
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

.Header_NavItem {
  margin: 0 1rem 0 0;
  text-transform: uppercase;
}

.Header_NavItem:last-child {
  margin-right: 0;
}

@media all and (min-width: 600px) {
  /* 600px以上でFlexboxを有効に�
��レイアウ�
��切り�
��る 

  .Header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .Header_Logo {
    margin: 0;
  }

  /* 600px以上のナビゲー�
ョンメニ�
��のス�
��ル 

  .Header_NavItem {
    margin: 0 2rem 0 0;
    text-transform: uppercase;
  }
}


/* Footer */

.Footer {
  display: block;
  background-color: #fff;
  color: #444;
  padding: 3rem 2rem 3rem;
  margin-top: 2rem;
}

.Footer a {
  color: #45c80d;
}

.Footer a:hover {
  color: #ff0000;
}

.Footer_NavItems {
  list-style-type: none;
  list-style-position: inside;
  margin: 0 0 2rem;
  padding: 0;
  text-align: left;
}

.Footer_NavItem {
  margin: 0 1rem 0 0;
  line-height: 1.5;
  font-size: 0.9rem;
}

.Footer_Company {
  line-height: 1;
  margin: 0 0 1rem;
}

.Footer_Company dt {
  line-height: 1;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.Footer_Company dd {
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

@media all and (min-width: 600px) {
  /* 600px以上でFlexboxを有効に�
��レイアウ�
��切り�
��る 

  .Footer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }

  .Footer_NavItems {
    text-align: right;
  }
}


/* 横幅一杯の�
��ックの�
タイ
� */
.Content_Box-FullWidth {
  display: block;
  margin-bottom: 1rem;
}

/* 余白ありの�
��ックの�
タイ
� */
.Content_Box-Padding {
  display: block;
  padding: 1rem;
}

/* シングルカ
�ムの横
�指�
*/
.Content_Box-Single {
  width: 100%;
}

.Content_Box-Single p {
  text-align: justify;
}

.Content_Heading {
  color: #555;
  font-family: serif;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin: 3rem 0;
}

.Content_Paragraph-Large {
  font-family: serif;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.4;
  color: #555;
}



@media all and (min-width: 600px) {
  .Content_Box-Padding {
    display: flex;
    justify-content: center;
  }

  /* 600px以上ではシングルカ�
��の横幅を60%に
�書きし
�適�
*/
  .Content_Box-Single {
    width: 60%;
  }

  .Content_Box-FlexWrap {
    display: flex;
    flex-wrap: wrap;
  }

  .Content_Heading {
    font-size: 1.8rem;
  }

  .Content_Paragraph-Large {
    font-size: 1.2rem;
    line-height: 1.6;
  }
}


/* Main Content Description List */

.Description_Items-Row {
  display: block;
  width: 100%;
}

/* お知らせやNEWSペ�
ジのレイ
�ウト�
定 

.Description_Title {
  margin-bottom: 0.2rem;
  padding: 0;
}

.Description_Data {
  margin-bottom: 1rem;
  padding: 0;
}

.Description_Data-List {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

@media all and (min-width: 600px) {

  /* 600px以上のお知らせやNEWSページ�
��レイアウト指定ではFlex
xを有効にし
�横並び
�配�
*/
  .Description_Items-Row {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 auto;
    align-items: stretch;
    width: 100%;
  }

  .Description_Title {
    /* flex-basisを使って�
��ム幅�
��定 

    flex-basis: 30%;
    margin-bottom: 0.2rem;
    padding: 0;
  }

  .Description_Data {
    /* flex-basisを使って�
��ム幅�
��定 

    flex-basis: 70%;
    margin-bottom: 1rem;
    padding: 0;
  }
}


/* Main Content Button *


.Content_Button {
  display: block;
  width: 60%;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.1;
  background-color: #257a01;
  border: 1px solid #1b5901;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
  border-radius: 0.2rem;
}

.Content_Button:hover {
  display: block;
  color: #fff;
  background-color: #ff0000;
  border: 1px solid #1b5901;
}

@media all and (min-width: 600px) {
  .Content_Button {
    width: 60%;
  }
}



.Content_Button_Reset {
  display: block;
  width: 40%;
  color: #ddd;
  font-size: 1.1rem;
  line-height: 1.1;
  background-color: #257a01;
  border: 1px solid #1b5901;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
  border-radius: 0.2rem;
}

.Content_Button_Reset:hover {
  display: block;
  color: #fff;
  background-color: #1b5901;
  border: 1px solid #1b5901;
}

@media all and (min-width: 600px) {
  .Content_Button_Reset {
    width: 20%;
  }
}

/* Main Home Hero *


/* トップのヒーローイメージの�
��ックのテキストの�
��はFlexboxで調
�す�
*/
.Content_Hero {
  display: flex;
  align-items: center;
  width: 100%;
  height: 300px;
  background-color: #fff;
  background-image: url('../images/gion_02.jpg');
  background-position: 15% top;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2rem;
}

.Hero_Text {
  color: #fff;
}

.Hero_Heading {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.3rem;
}

.Hero_Tagline {
  font-size: 1.4rem;
  margin-bottom: 0;
}

@media all and (min-width: 600px) {

  /* 600px以上のヒーローイメージ�
ブロックの高さ�
写真の配�
��置を�
��き 

  .Content_Hero {
    width: 100%;
    height: 350px;
    background-position: center 40%;
  }

  .Hero_Text {
    padding-left: 2rem;
    color: #fff;
  }

  .Hero_Heading {
    font-size: 3.0rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .Hero_Tagline {
    font-size: 1.5rem;
  }


  .Hero_Tagline_1 {
    font-size: 1.0rem;
    text-align: right;
  }


/* Home Main Column *


.Content_HomeColumn {
  display: block;
  margin-bottom: 5rem;
}

.Column_Text {
  width: 100%;
}

.Column_Heading-Small {
  color: #000;
  font-size: 1rem;
  line-height: 1.2;
  border-bottom: 1px solid #00b;
  margin-bottom: 2rem;
  padding-bottom: 0.3rem;
}

.Column_Heading-Normal {
  color: #444;
  font-family: serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 0.2;
  margin-bottom: 2rem;
}

.Column_Paragraph {
  margin: 0 0 2rem 0;
}

.Column_Image {
  width: 100%;
  margin: 0 0 2rem 0;
}

.Content_Image-Fluid {
  width: 100%;
  max-width: 100%;
}

.Column_ImageCaption {
  color: #555;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}


@media all and (min-width: 600px) {

  /* トップページのコラム部�
��レイアウト指定�
Flexboxで上�
き 

  .Content_HomeColumn {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: center;
    margin-bottom: 1rem;
    width: 85%;
  }

  /* コラム部分の写真とテキストの
ブロックの入れ替えはflex-di
ctionで視覚的�
位置�
��に 

  .Content_Column-Reverse {
    flex-direction: row-reverse;
  }

  .Column_Text {
    flex-basis: 75%;
    padding: 3%;
  }

  .Column_Image {
    flex-basis: 25%;
    padding: 3%;
  }
  .Column_Heading-Small {
    font-size: 1rem;
  }

  .Column_Heading-Normal {
    font-size: 1.5rem;
  }
}


/* Main Content Contact *


.Content_HomeContact {
  margin: 3rem 0 5rem;
}


/* News Column *


.Content_NewsColumn {
  display: block;
  margin-bottom: 3rem;
}

.News_Text {
  width: 100%;
}

.News_Heading-Small {
  color: #000;
  font-size: 0.85rem;
  line-height: 1.2;
  border-bottom: 1px solid #000;
  margin-bottom: 1.5rem;
  padding-bottom: 0.3rem;
}

.News_Heading-Normal {
  color: #444;
  font-family: serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.News_Paragraph {
  margin-bottom: 0;
}

.News_Image {
  width: 100%;
  margin: 0 0 1rem 0;
}

.News_Image-Fluid {
  width: 100%;
  max-width: 100%;
}

@media all and (min-width: 600px) {
  .Content_NewsColumn {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    align-items: flex-start;
    width: 85%;
  }

  .Content_NewsColumn-Reverse {
    flex-direction: row-reverse;
  }

  .News_Text {
    flex-basis: 75%;
    padding: 3%;
  }

  .News_Image {
    flex-basis: 25%;
    padding: 3%;
  }

  .News_Heading-Small {
    font-size: 0.9rem;
  }

  .News_Heading-Normal {
    font-size: 1.2rem;
  }
}


/* Contact Form */

.Content_ContactForm {
  margin: 2rem 0;
}

.ContactForm_Items {
  margin-bottom: 3rem;
}

.ContactForm_InputText {
  width: 100%;
  height: 3rem;
  line-height: 3;
  padding: 0 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

.ContactForm_InputSelect {
  width: 75%;
  height: 3rem;
  padding: 0 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

.ContactForm_InputArea {
  width: 100%;
  line-height: 1.6;
  height: 10rem;
  padding: 0.5rem;
  border-radius: 0.1rem;
  border: 1px solid #999;
}

@media all and (min-width: 600px) {

  /* 親要素（.Content_Box-Padding）のFlexboxの�
��定を活かして、ラベ�
��フォーム要素
�上下中�
��揃え
� */
  .ContactForm_Items {
    align-items: center;
  }
}