/* 演習問題43のCSS */
@charset "utf-8";

body,
h1,
h2,
p,
div {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 2em;
}

h2 {
    font-size: 200%;
	color: #8e1e50;
	/* サブヘッダーテキストの色 */
}

h3.koenkai {
	text-align:center;
	font-size: 1.5em;
}

h3.kyokai {
	font-size: 1.5em;
}

h4 {
	color: black;
}

section {
	margin-top: 20px;
}

.backmenu { text-align: right; } 


/*各セクションのヘッダーの文章の色＜緑＞バックが赤系の色の時など*/
.setsumei {
        color: green;
}
/*各セクションのヘッダーの文章の色＜茶色＞バックが青系の色の時など*/
.setsumei2 {
    color: brown;
}

/*センター揃えしたい時に使うクラス*/
.info1 {
    text-align: center;
}

/*センター揃え＆少し小さ目にしたい時に使うクラス*/
.info2 {
    font-size: 80%;
    text-align: center;
}

/*少し小さ目にしたい時に使うクラス*/
.info3 {
    font-size: 80%;
}


/*特に設定なし（今後何か設定するかも）*/
.info4 {
    font-size: 100%;
}

/*アンダーラインをつけたい時*/
.underline{
    text-decoration: underline;
}


/*★ミニ通信のタイトル*/
.title {
     position: relative;
}

header {
	text-align: center;
    background-color: #CCFFCC;  /*タイトルの背景色（4月：#fbcaec、8月：#CCFFCC、12月：#cfb3b3*/
	color:  #11037c;	         /* ヘッダーテキストの色 */
	padding: 10px;
}

.title-text {
    position:absolute;
    font-size:3.0vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
/*★ここまでミニ通信のタイトル（色以外はいじらないで！）*/


body {
	background-color: #f5f3ef;
	/* ページの背景色 */
	color: ##2d3a35;
	/* テキストの色 */
    margin: 15px;
    /* ブラウザの縁とテキストの間の余白 */
	padding: 2px;
    /*ページの内側の余白*/
    font-size: 0.9em;
    }



/*記事ごとのタイトル*/
.kiji {
    font-size: 200%;
    margin-bottom: 20px;
	display: flex;    /*イラストとタイトルを横に並べる設定*/
}

/*記事ごとのタイトルの上の余白*/
article {
    padding-top: 70px;
}

section{
       margin:10px;
       }

/*記事ごとのタイトルの横にあるイラストの大きさなど*/
img.titlemini{
	width: 100px;      /*横幅*/
	height:100px;      /*高さ*/
    margin-left: 15px;
}


/* ★記事ごとに背景色を変える指定 */

    .tokushu    {background-color:#defffa;}/* 特集ページ */
    .koenkai    {background-color:#fff8fe;}/* 後援会員の自己紹介 */
  /* 協会だより */
    .kyokai     {
                background-color:#ecebff;
                }
    .infomation {background-color:#feffe6;}/* 会員へのお知らせ */

    .yakuinkai{                     /*役員会議事抄録*/
              border-bottom:dotted;/*下線を点線にする*/
              border-color:#7d7263;
              border-width:1px;
                } 

    .goods    {background-color:#b7fad1;}/* グッズ紹介 */
              /*タイトルの背景色と同色にする（4月：#fbcaec、8月：#CCFFCC、12月：#cfb3b3*/
              
    .okuduke  {background-color:#fec2f73c;}/* 奥付 */



  /*　色指定用　色の名前で指定できるように　*/  
    .orange{
    color:orangered
    }
        .pink{
    color: #ff1493;
        }
    .green{
    color: #018a01;
        }
    .blue {
    color: midnightblue;
    }
    .brown {
    color:brown;
    }

 /*記事の中のトピックの上下の余白*/
.topic {
    padding-top: 50px;
    padding-bottom: 10px;
        }
 /*記事の中のトピックのタイトルの色*/
.title-topic {
    color:brown;
	font-size: 150%;
}

 /*記事の中のトピックのタイトルの色*/
 .title-topic2 {
    color:midnightblue;
	font-size: 150%;
}


/*協会だより　横長の写真の大きさ*/
img.kyokai_yoko {
	width: 500px;     /*横幅*/
	height:auto;      /*高さ*/
    margin-left: 15px;    
}

/*協会だより　縦長の写真の大きさ*/
img.kyokai_tate {
	width: 300px;     /*横幅*/
	height:auto;      /*高さ*/
    margin-left: 15px;
    vertical-align: bottom;
}

/*写真を文章に回り込ませる指定を次のセクションの前に解除する（大事）*/
section.picture_right {
    clear:both;
    padding-top: 15px;
}

/*写真を文章の右側に配置する指定*/
.picture_right img {
    float: right;
    margin: 0 0 15px 15px;
}

/*写真を文章に回り込ませる指定を次のセクションの前に解除する（大事）*/
section.picture_left {
    clear:both;
    padding-top: 15px;
}

/*写真を文章の左側に配置する指定*/
.picture_left img {
    float:left;
    margin:0 15px 15px 0;
}

/*写真を文章に回り込ませる指定を次のセクションの前に解除する（大事）*/
section.clear {
    clear:both;
    padding-top: 15px;
}


/* グッズ紹介の購入方法のところ */
.menu-item {
	width: auto;
	background-color: #ffffff;
	/* メニューアイテムの背景色 */
	border: 1px solid #dddddd;
	/* メニューアイテムの境界線 */
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
}

/*グッズの値段*/
.price {
    color:red;
    font-size: 150%;
}

/*グッズ＜新色！＞の時*/
.newcolor {
    color:red;
    font-size: 200%;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

/*写真による紹介の指定＜自己紹介・グッズ紹介＞*/
.card-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    justify-content:center;
    padding:20px;
}

.card{
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    border-radius:8px;
    overflow:hidden;
}

img {
    width:100%;
    height:auto;
    object-fit:cover;
}

.card-content{
    padding:20px;
}