@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */


/* @group Fluid-img */

img { max-width : 100%}

/* @end */

/* @区切り線 */

hr {
  height: 1px;
  border: none;
  border-top: 2px #7D4934 solid;
  margin-bottom: 3em;  /* 下線の外側の余白量 */
}

/* @end */

/* @group HTML */

html {
font-family : verdana, sans-serif;
font-size : 75%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.5}

/* @end */


/* @group Heading */

h1 {
font-size : 3em; /* 48px */
line-height : 1; /* 48px */
margin-bottom : 0.5em } 

h2 {
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em } 

h3 {
font-size : 1.5em; /* 24px */
line-height : 1; /* 24px */
margin-bottom : 1em } 

hgroup h2,h4,h5,h6 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
margin-bottom : 1.5em } 

/* @end */

/* @group Header */

header { 
text-align : center;
padding-top : 1.5em;
background : #ffffff}

header h1 { margin-bottom : 0.5em}
header h2 { color : #000000}

/* @end */

/* @group Contents */

#contents {
width : 90%;
margin : 0 auto;
text-align : center}

#contents p { 
margin-bottom : 1.5em;
text-align : left}
#contents img { 
margin-bottom : 1.5em; 
box-shadow : 0 0 5px #2f1f1f}

/* @end */

/* @group Footer */

footer {
padding : 1.5em 0;
color : white;
text-align : center;
background : url(/~shinwa/hakama-new/assets/images/bg1.png)}

/* @end */

/*768px*/
@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/
#contents { text-align : left}

}

/*1024px*/
@media screen and (min-width : 1024px) {

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

/* @group Nav */

nav ul {
width : 93.75%;/* 960/1024 */
margin : 0 auto}

/* @end */

/* @group Contents */

#contents {
overflow : hidden;
width : 93.75%}

#contents #main,
#contents #sub { 
float : left;
margin : 0 1.0416667% } 

#contents #main { width : 64.5833333%}
#contents #sub { width : 31.25%}

/* @end */


/* @group Footer */

footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}

/* @end */

}

/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -200px; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 200px; /*メニュー横幅①*/
    z-index: 1000;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    content: "≡"; /*メニューアイコン*/
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px;
    line-height: 50px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-200px); /*メニュー横幅①と合わせる*/
}

#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}
/* @end */

/* スライダー */
#stage {
position: relative;
}
.pic {
position: absolute;
}
.pic img {

height: auto;
opacity:0;
-moz-animation: imgTrans 88s infinite;
-webkit-animation: imgTrans 88s ease-in infinite;
animation: imgTrans 88s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
#photo6 img {
-moz-animation-delay: 40s;
-webkit-animation-delay: 40s;
animation-delay: 40s;
}
#photo7 img {
-moz-animation-delay: 48s;
-webkit-animation-delay: 48s;
animation-delay: 48s;
}
#photo8 img {
-moz-animation-delay: 56s;
-webkit-animation-delay: 56s;
animation-delay: 56s;
}
#photo9 img{
-moz-animation-delay: 64s;
-webkit-animation-delay: 64s;
animation-delay: 64s;
}
#photo10 img {
-moz-animation-delay: 72s;
-webkit-animation-delay: 72s;
animation-delay: 72s;
}
#photo11 img {
-moz-animation-delay: 80s;
-webkit-animation-delay: 80s;
animation-delay: 80s;
}

@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
/* end スライダー */

/* カレンダーレスポンシブ */
.cal_wrapper {
max-width: 960px;
min-width: 300px;
margin: 2.0833% auto;
}

.googlecal {
position: relative;
padding-bottom: 100%;
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 130% !important;
}

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

/* end カレンダーレスポンシブ */

/* iframe レスポンシブ　*/
.framer {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.frame-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*end*/