@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  box-sizing: border-box;
}
::before , ::after {
	box-sizing: inherit;
}

body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: #fff;
   letter-spacing : 0.2em;
}
header {
   padding: 30px 5% 10px;
   position: fixed;
   top: 0;
   width: 100%;
   max-width: 1400px;
   background-color: #fff;
   display: flex;
   align-items: center;
}

nav {
   margin: 0 0 0 auto;
}

ul {
   list-style: none;
   margin: 0;
   display: flex;
}

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

.main-visual {
   display: flex;
   padding-top: 150px;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url("image2/top_2022.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}

.main-toyokawa-visual {
   display: flex;
   padding-top: 120px;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url("image2/toyokawa_top_2.png") top center / cover no-repeat;
   margin-bottom: 0px;
}

.main-toyohashi-visual {
   display: flex;
   padding-top: 120px;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url("image2/main_toyohashi.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}

.main-dogrun-visual {
   display: flex;
   padding-top: 300px;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url("image2/dog_main2.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}

.main-event-visual {
   display: flex;
   padding-top: 0px;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url("image2/event.jpg") center scroll / cover scroll;
   margin: 150px 10px;
}

.li-rogo {
	width: 50px;
}

.futter-visual {
   justify-content: center;
   align-items: center;
   padding-top: 0.5em;
   padding-bottom:  1.5em;
   background-color: #C9BC9C;
   text-align: center;
}

p {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 100;
    font-size: 1em;
    line-height: 2em;
	text-align: center;
}

h1 {
    font-size: 3.5em;
    font-weight: normal;
    color: #fff;
    font-family: "MS Serif", "New York", serif;
}

h2 {
    font-size: 5em;
    font-weight: normal;
    color: #fff;
    font-family: "MS Serif", "New York", serif;
	writing-mode: vertical-rl;
}

h3 {
	margin-top: 3em;
	text-align: center;
	font-size: 1.5em;
}

h4 {
	font-size: 0.7em;
	font-weight: 100;
	text-align: center;
	letter-spacing: 1px;
}
h5 {
    margin-top: 2em;
    font-size: 50px;
    font-weight: normal;
    color: #000000;
    font-family: "MS Serif", "New York", serif;
    writing-mode: vertical-rl;
}
h6 {
	margin-top: 2em;
    font-size: 0.5em;
    font-weight: normal;
    color: #000000;
    font-family: "MS Serif", "New York", serif;
	writing-mode: vertical-rl;
	line-height: 2.5em
}
h7 {
    font-size: 0.8em;
	color:#504F4F;
	letter-spacing: 0.1em;
	text-align: left;
}

h8 {
	font-size: 0.8em;
	font-weight: 100;
    text-align: left;
}

h9 {
    font-size: 1.5em;
    font-weight: normal;
	text-shadow: 1px 1px 4px #000;
    color: #fff;
    font-family: "MS Serif", "New York", serif;
	writing-mode: vertical-rl;
}

h10 {
	font-size: 0.8em;
	font-weight: 100;
	text-align: center;
	letter-spacing: 1px;
}

.sp-nav {
   display: none;
}

.style-logo {
	width: 150px;
}

/*ここから本編*/
.maxbox {
	padding: 1em 0.5em;
}
.card-body {
	padding: 5px;
	text-align: left;
}

.card-title {
    margin-bottom: 0.3rem;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 300;
    font-size: 1em;
	text-align: center;
}

.card-title2 {
    margin-bottom: 0.3rem;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 300;
    font-size: 0.7em;
	text-align: center;
}

.card-text:last-child {
    font-style: normal;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    margin-bottom: 0em;
    padding-left: 0px;
    letter-spacing: 1px;
    text-align: left;
}
.card-img-top{
	width:100%;
}

.card-img-top2 {
	width: 80%;
}

.card-img-inst {
	height: 20px;
	width: auto;
	margin: 0px 10px 0px 5px;
}

.card-img-link {
	width:100%;
	padding: 40px 3px 0px 3px;
}

.card-img-dog {
	width: 40%;
}

.card-img-dog2 {
	padding: 0em 1em 4em 1em;
	width: 100%;
}

.card-conce-body {
	padding: 5px;
}
.card-conce {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 30px;
}
.card-conce-text {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 60vh;
   margin-bottom: 30px;
}
.col {
	padding-top: 50px;
	width: 100%;
}
.col-menu {
	padding-top: 30px;
	width: 100%;	
}
.col2 {
	padding-top: 20px;
	width: 80%;
    margin: 0 auto;
}
.col3 {
	padding-top: 20px;
	padding-bottom: 40px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.col5 {
	text-align: left;
}
.col-d {
	float: left;
	font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.col-dog {
	width: 100%;
	padding: 5% 5% 5% 5%;
	font-weight: 100;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
}

.col-map {
	width: 100%;
}
.col-verti {
    margin-top: 4em;
    background: url("image2/conce_img.png") top / cover no-repeat;
	background-position: 20% ;
    opacity: 1;
}

.col-img {
	width: 50%;
	float: left;
}

.col-img100 {
	width: 100%;
	padding-bottom: 30px;
}

li {
	padding-right: 1em;
	font-size: 1em;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

hr {
	opacity: 0.3;
}

.menu-title {
    margin-top: 2em;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 300;
    font-size: 1.5em;
	text-align: center;
}

.menu-title2 {
    margin-top: 4em;
	padding: 0 5px 0 5px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 300;
    font-size: 0.7em;
}

.menu-main-title {
    margin-bottom: 0.3rem;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 300;
    font-size: 0.9em;
	letter-spacing: normal;
	text-align: left;
}

.drink {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.9em;
}

.dog-drink {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
    padding: 0% 10% 5% 10%;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	text-align: left;
}

.center-text {
	width: 100%;
	text-align: center;
}
.text-left {
	text-align: left;
	width:100%;
}

.seiyakuimg {
	width: 70%;
}

.access-visual {
   height: 300px;
   background: url("image/fusion-img-access/fusion-ura2-b.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}

.access-visualk {
   height: 300px;
   background: url("image2/t-park-b.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}



@media (max-width: 800px) {
	
    .iflame {
	overflow: scroll;
	font-size: 0.8em;
	min-height: 20px;
	max-height: 150px;
	margin-bottom: 20px;
    padding: 5px;
}
    .iflame2 {
	overflow: scroll;
	font-size: 0.8em;
	min-height: 20px;
	max-height: 90px;
	margin-bottom: 20px;
    padding: 5px;
}

  /*スマホのメニュー設定*/
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      background: rgba(255, 251, 246, .9);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #A4A4A4;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #A4A4A4;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #A4A4A4;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #707070;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #707070;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #707070;
      transform: rotate( -45deg );
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }
   .main-visual {
      padding: 0 4%;
   }
	
a {
    text-decoration: none;
    color: #707070;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

	
}


/*タブレット用*/
@media (min-width: 800px){

	body {
		max-width: 1300px;
		margin: 0 auto;
	}
	
h1 {
    font-size: 6em;
    font-weight: normal;
    color: #fff;
    font-family: "MS Serif", "New York", serif;
} 
	
  .maxbox-md {
	 padding-left: 10%;
	 padding-right: 10%;
	 text-align: center;
	}	
  .col-md {
	padding: 5px 5px 5px 5px;
    max-width: 33.333333%;
	float :left;
  }
  .col-menu-md {
	padding: 5px 5px 5px 5px;
	max-width: 25%;
	float :left;
	}
 .col2-md {
	padding-top: 20px;
	max-width: 60%;
	margin: 0 auto;
}
 .col3-md {
	max-width: 50%;
	float :left;
	padding: 0px 10px 0px 10px;
	margin-bottom:  25px;
	}
 .col5-md {
		max-width: 60%;
	    margin: 0 auto;
	    text-align: left;
	}
 .col-d-md {
	width: 250px;
	float: left;
	font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
  .col-img-md {
	width:25%;
	}
	
  .col-img100-md {
	width: 100%;
	padding-bottom: 50px;
	}
	
  .card-img-dog2 {
	padding: 0em 0em 5em 0em;
	width: 60%;
}
	
 .iflame-md {
	overflow: scroll;
	font-size: 0.8em;
	min-height: 50px;
	max-height: 150px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	width: 40%;
}
  .iflame2-md {
	overflow: scroll;
	font-size: 0.8em;
	min-height: 20px;
	max-height: 50px;
	margin-bottom:5px;
    padding: 5px;
	text-align: left;
}
	a {	
   text-decoration: none;
   color: #707070;
   letter-spacing: 0.1em;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
  .card-img-inst-md {
	height: 30px;
	width: auto;
	margin: 0px 10px 0px 5px;
}
	
  .card-img-dog {
	width: 20%;
}

	
  .col-verti-md {
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	}
  .card-conce-body-md {
	width: 50%;
	}
  .card-conce-md {
   align-items: left;
   float: right;
   width: 30%
}
  .card-conce-text-md {
	padding-top: 3em;
	width: 70%;   
	height: 90vh;
	float: right;
	font-size: 1.7em;
	}
  .col-harf-md {
	max-width: 45%;
	padding-left:5%;
    float: left;
	}
  .col-map-md {
	max-width: 45%;
	padding-left:10%;
    float: left;
	}
   .text-left-md {
       max-width: 100%;
	}
		
  .col-dog-md {
	width: 70%;
	padding: 5% 5% 5% 5%;
	font-weight: 100;
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 auto;
}	
	
	.seiyakuimg {
	width: 30%;
}
	
	.dog-drink2-md {
	 text-align: center;
	}
	

  .access-visual-md {
   display: flex;
   justify-content: center;
   height: 495px;
   background: url("image2/fusion-ura2-b.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}
	
  .access-visualk-md {
   display: flex;
   justify-content: center;
   height: 495px;
   background: url("image2/toyokawa/t-park-b.jpg") top center / cover no-repeat;
   margin-bottom: 0px;
}	
	
	
}



@media (min-width: 1024px){
	
		
	
}
.text-center {
	
}

a:hover {
    -webkit-opacity: 50%;
    opacity: 50%;
}